Web development uses several color formats, each with different strengths. HEX codes (like #5DCAA5) are the most compact and widely recognized. They represent red, green, and blue channels as two-digit hexadecimal values. RGB (like rgb(93, 202, 165)) uses decimal values from 0 to 255 for each channel, which many developers find more intuitive for programmatic color manipulation. HSL (like hsl(160, 49%, 58%)) describes color in terms of hue (the color wheel angle), saturation (vividness), and lightness (brightness). HSL is the most useful format for design work because adjusting a single value creates predictable, harmonious results.
HEX is best for static CSS values and design handoffs. It is compact and universally supported. Use it when you need a simple color reference. RGB/RGBA is ideal when you need transparency (the alpha channel) or when generating colors dynamically in JavaScript, since the channels map directly to integer math. HSL/HSLA is the best choice for building color systems and themes. Need a lighter shade? Increase the lightness. Need a muted version? Decrease the saturation. Need a complementary color? Add 180 to the hue. This makes HSL far more practical for design systems than HEX or RGB.
The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios between foreground and background colors. Level AA requires at least 4.5:1 for normal text and 3:1 for large text (18px bold or 24px regular). Level AAA requires 7:1 for normal text and 4.5:1 for large text.
These ratios exist because approximately 300 million people worldwide have some form of color vision deficiency. Meeting WCAG AA is legally required in many jurisdictions (including ADA compliance in the US and EAA in the EU). Beyond compliance, good contrast simply makes your content easier to read for everyone, including users on low-quality screens or in bright sunlight.
This tool calculates the contrast ratio between your selected foreground and background colors in real time, showing whether the combination passes AA and AAA at both normal and large text sizes.
A consistent color palette is the foundation of good UI design. Start with a primary brand color, then generate variations by adjusting HSL values: lighter tints (higher lightness), darker shades (lower lightness), and muted tones (lower saturation). Most design systems define 5 to 10 shades per color (50, 100, 200 ... 900), similar to Tailwind CSS.
When choosing colors for data visualization, ensure adjacent colors are distinguishable even for color-blind users. Avoid relying solely on red/green distinctions. Test your palette with a color blindness simulator.
Modern CSS supports all three formats plus oklch() and color() for wider gamut displays. CSS custom properties (variables) make it easy to build a theming system: define your colors as --color-primary: #5DCAA5 in your root, then reference them everywhere with var(--color-primary). For dark mode, swap the variable values rather than overriding individual styles.
Working on a web project? The Markdown Preview helps with formatted content. The JSON Formatter is useful for design token files. For more on building web interfaces, see our story of building TerminalFeed, which covers the design decisions behind this site's dark terminal aesthetic.
This tool runs 100% client-side. No data is sent to any server. Your color values never leave your browser.