This tool gives you two ways to choose a color. Click the large colored square to open your browser's native color picker — a full visual selector where you can sample any hue, saturation, and brightness. Alternatively, type a 6-digit HEX code directly into the text field (without the # symbol) and press Enter or Tab. As soon as you choose or enter a color, all three format outputs — HEX, RGB, and HSL — update instantly. Click any Copy button to copy that value to your clipboard. Scroll down to see the WCAG contrast ratios against white and black, and the four color harmony palettes. Click any harmony swatch to set that color as your active color and recalculate everything.
The three most common CSS color formats each have a different purpose. HEX (#RRGGBB) is a compact 6-character representation where each pair of digits is a hexadecimal value from 00 to FF representing the red, green, and blue channels. It's the most common format in design tools and CSS stylesheets because it's concise and copy-paste friendly. RGB (Red, Green, Blue) expresses the same information as three decimal values from 0 to 255. This format is intuitive for anyone who has worked with digital color before and is directly compatible with CSS's rgb() function. HSL (Hue, Saturation, Lightness) is arguably the most designer-friendly format: hue is a degree on the color wheel (0–360), saturation is a percentage measuring color intensity, and lightness is a percentage from black (0%) to white (100%). The major advantage of HSL is that you can programmatically lighten or darken a color just by adjusting the lightness value, without touching the hue at all — making it powerful for building themeable design systems.
The Web Content Accessibility Guidelines (WCAG) set minimum contrast ratio requirements between text and its background to ensure readability for users with low vision, color blindness, or who work in bright environments. The standard AA level requires a contrast ratio of at least 4.5:1 for normal-sized text (under 18pt regular or 14pt bold) and 3:1 for large text. The stricter AAA level requires 7:1 for normal text. This tool calculates your color's contrast against both pure white (#FFFFFF) and pure black (#000000), showing you at a glance whether your color will work as text on a white background, or vice versa. For example, a bright yellow like #F0B90B reads well on a dark background but often fails AA against white — this checker tells you that immediately without any manual calculation.
Color theory defines several relationships between colors that tend to be visually pleasing. Complementary colors sit directly opposite each other on the color wheel (180° apart) and create strong contrast — useful for call-to-action buttons and visual highlights. Triadic harmonies use three colors evenly spaced at 120° apart, creating vibrant, energetic palettes often used in bold editorial and brand design. Analogous colors are adjacent on the wheel (here shown at ±30° and ±60°), producing natural, low-tension palettes that feel calm and cohesive — a favorite for background and UI surface color schemes. Split-complementary uses your base color plus the two colors flanking its direct complement (at 150° and 210°), which achieves high contrast without the stark tension of a direct complement.
One of the most common design mistakes is choosing a color in isolation without testing it against the backgrounds it will actually appear on. Bright yellows, light greens, and pastels that look vivid and attractive on a white design mockup can become completely illegible as text. The same yellow that pops beautifully on a dark navy background might have a contrast ratio of only 1.07:1 against white — barely distinguishable from the page itself. Use the contrast checker in this tool as a first-pass filter: if your color passes 4.5:1 against white, it's safe for body text on white backgrounds. If it passes 4.5:1 against black, it works as text on dark backgrounds. When neither passes, consider using the color for decorative purposes only (borders, icons, backgrounds), and pair it with a high-contrast foreground color for any text content.
Modern CSS supports several color notations. The hex format (#RRGGBB, and the shorthand #RGB) remains the most common and is supported in all browsers. The rgb() and rgba() functions let you express colors with optional transparency: rgba(240, 185, 11, 0.5) gives you 50% transparent yellow. The hsl() and hsla() functions accept the same hue-saturation-lightness model shown in this tool, making it easy to create color variants programmatically — for example, you can define a brand color as hsl(45, 93%, 49%) and then generate a hover state at hsl(45, 93%, 40%) simply by reducing the lightness. Looking forward, CSS is gaining more powerful functions: color-mix() lets you blend two colors directly in CSS, and oklch() uses the perceptually uniform OKLCH color space where changing lightness looks visually consistent across all hues. For design systems and themeable UI libraries, HSL remains the most practical choice today, while oklch represents the future of expressive CSS color work.
Expert guides and educational resources to help you master the math.
Password strength comes down to entropy — the number of possible combinations. Here's the math behind length vs. complexity, why passphrases beat random strings for humans, and what NIST 2024 actually recommends.
URL encoding converts unsafe characters into %XX hex sequences so they can travel safely through HTTP. Here's how percent encoding works, which characters must be encoded, and how hex color codes relate.
