REM (root em) is a CSS unit relative to the root font size of the document, usually 16px. Because rem values scale with the user's browser font settings, designs built with rem stay accessible and proportional on every device — unlike fixed pixel values.
Enter a pixel value to see its rem equivalent, or type a rem value to convert back. Adjust the base font size to match your project (some design systems use 10px or 20px roots). The conversion table covers the most common sizes, and the visual comparison shows how both units render identically at the same root size.
Frequently Asked Questions
Q: What is the difference between REM and EM?
What is the difference between REM and EM? rem is always relative to the root (html) font size. em is relative to the parent element's font size, so em compounds through nested elements while rem stays consistent.
Q: Why use REM instead of PX?
Why use REM instead of PX? REM scales with user accessibility settings — a user who increases browser font size sees larger text everywhere. PX stays fixed and can break layouts or accessibility. Modern best practice is rem for typography and spacing.
Q: What is the default base font size?
What is the default base font size? All major browsers default to 16px = 1rem. So 32px = 2rem, 8px = 0.5rem, and 24px = 1.5rem at the default root size.
Q: Can I use REM for media queries?
Can I use REM for media queries? Yes. Media queries written in rem respond to the user's font size settings, not just viewport width — a subtle accessibility improvement over px-based breakpoints.
Q: Do I need to convert every value manually?
Do I need to convert every value manually? No. Modern build tools (PostCSS, Tailwind) handle conversions automatically. Use this calculator for quick one-off conversions and for reviewing hand-written CSS.
CSS Named Colors & Color Psychology
The web has 148 named colors built into CSS, from Coral to Goldenrod. Beyond the code, color psychology shapes how users feel about interfaces — warm tones energize, cool tones calm, and neutrals build trust. This palette mixes CSS classics with the psychology behind them.
Coral #FF7F50Warm and friendly — popular for CTAs in lifestyle brands
Tomato #FF6347Energetic red-orange, great for urgent accents
Goldenrod #DAA520Earthy gold associated with quality and heritage
Teal #008080Balanced blue-green — calm, trustworthy, professional
Indigo #4B0082Deep violet tied to wisdom and premium brands
Crimson #DC143CBold red for passion, alerts, and strong emphasis
SlateBlue #6A5ACDSoft purple-blue common in SaaS dashboards
ForestGreen #228B22Nature and growth — the color of eco and finance brands
HotPink #FF69B4Playful and bold, the signature of youth-oriented design
Navy #000080Authority and stability — the suit-and-tie of colors
Q: What are CSS named colors?
What are CSS named colors? CSS defines 148 named colors like Coral and Goldenrod that work in any stylesheet without hex codes. They are great for prototyping but designers usually switch to hex or HSL for precise brand colors.
Q: How does color psychology affect design?
How does color psychology affect design? Warm colors (red, orange, yellow) create energy and urgency; cool colors (blue, green, teal) create calm and trust. CTAs often use warm tones while financial and health brands prefer blues and greens.