cmyk(0%, 66%, 80%, 0%)
—
red-500 (≈30Δ)text-red-500
:root {
--color-primary: #ff5733;
--color-primary-rgb: 255, 87, 51;
--color-primary-hsl: 14, 100%, 60%;
}No colors picked yet
This tool is part of these guided projects. Each project provides step-by-step instructions with checklists and all the tools you need in one place.
Calculate paint, choose colors, and follow a proven prep-to-finish painting process.
Create a cohesive brand identity with colors, gradients, shadows, and design tokens.
Define a primary palette, build accessible color scales, design gradients, and export CSS design tokens.
Tools you might need next
Generate harmonious color palettes from a base color. Complementary, analogous, triadic, tetradic, monochromatic. CSS variables, Tailwind config, WCAG contrast.
Check color contrast ratio. WCAG AA/AAA compliance. For accessibility. Free design tool with instant browser-based results — no account, works on desktop and
Convert HEX color to RGB. #ff5733 to rgb(255,87,51). For CSS and design. Free design tool with instant browser-based results — no account, works on desktop
HEX (#RRGGBB) maps directly to RGB (0–255 per channel). HSL (Hue 0–360°, Saturation 0–100%, Lightness 0–100%) provides intuitive adjustment of hue, vividness, and brightness.
HEX #FF5733 = RGB(255, 87, 51) = HSL(11°, 100%, 60%)Contrast ratio compares relative luminance of foreground and background colors. WCAG 2.1 requires 4.5:1 for normal text (AA) and 7:1 for enhanced (AAA). Large text (18pt+) needs 3:1 for AA.
Formula: W3C WCAG 2.1
RGBA and HSLA add an alpha channel (0–1 or 0–100%) for opacity. Alpha 1.0 is fully opaque; 0.0 is fully transparent. Useful for overlays, glass effects, and layered UI elements.
Updated: July 2026
A designer selects a primary brand color and copies HEX and RGB values for the design system.
→ RGB(37, 99, 235), HSL(217°, 91%, 53%)
A developer verifies that body text meets WCAG AA contrast against the page background.
→ Contrast ratio 12.6:1 — passes AAA
A developer picks a secondary text color on a dark background that meets WCAG AA contrast requirements.
→ Contrast ratio ~5.5:1 — passes AA for normal text
Light gray text (#999) on white often fails WCAG AA (needs 4.5:1). Use the contrast checker before shipping — roughly 1 in 12 men have some form of color vision deficiency.
HSL lightness at 50% with full saturation is vivid, not medium-gray. At 0% lightness you get black regardless of hue. Adjust saturation and lightness together for predictable results.
Pick colors visually and get instant conversions between HEX, RGB, and HSL formats. Check WCAG contrast ratios for accessibility, generate harmonious palettes, and copy CSS-ready values for your next design or development project.