CSS Color Converter #FFFFFF

Both HEX and RGB represent colors using the same three red, green, and blue channels - they are just written differently. RGB uses three decimal numbers from 0 to 255, for example rgb(255, 87, 51). HEX represents those same three values in hexadecimal notation (base 16) as a single six-character string, for example #FF5733. The two formats are mathematically equivalent and any color in one can be converted exactly to the other. HEX is more compact and common in HTML and CSS, while RGB is often easier to manipulate programmatically.

Both use Hue and Saturation, but the third channel differs in an important way. In HSL (Hue, Saturation, Lightness), a lightness of 100% always produces white regardless of the hue or saturation, and 50% lightness at full saturation gives you the purest vivid color. In HSV (Hue, Saturation, Value), a value of 100% at full saturation gives you the purest vivid color, and reducing saturation moves toward white rather than a lighter shade. HSL is more common in CSS. HSV is the model used in most design tool color pickers such as Photoshop and Figma, which is why it tends to feel more natural when matching colors from those applications.

Both are perceptually uniform color spaces - meaning equal numeric steps produce changes that look equally different to the human eye - but OKLAB is a more recent and more accurate refinement. LAB (also written as CIE L*a*b*) was developed to fix the perceptual shortcomings of RGB and HSL, but it has known accuracy issues especially in the blue region of the spectrum. OKLAB was introduced by Björn Ottosson in 2020 specifically to address those weaknesses. It produces smoother, more visually consistent gradients and color mixes and is the recommended choice for modern work. Both are now valid CSS Color Level 4 values.

LCH is the cylindrical (hue-based) version of LAB, expressing colors as Lightness, Chroma, and Hue rather than the abstract a* and b* axes of LAB. This makes it much more intuitive to work with since hue works like a color wheel angle. OKLCH is the equivalent cylindrical version of OKLAB, offering the same improved perceptual accuracy but with the hue-angle interface. OKLCH has become the preferred format for generating accessible color palettes and design systems because you can shift hue while keeping perceived brightness consistent.

The simplest approaches are RGBA and HSLA, which add a fourth alpha value between 0 (fully transparent) and 1 (fully opaque). For example, rgba(255, 0, 0, 0.5) is a 50% transparent red. You can also use an 8-digit HEX code where the last two digits represent the alpha channel in hexadecimal - #FF000080 is approximately 50% transparent red (80 hex = 128 decimal ≈ 50%). In modern CSS Color Level 4 syntax, all color functions including lab(), oklch(), and others support an optional / alpha parameter, for example oklch(0.63 0.19 37 / 0.5).

Use HSL when you need broad browser compatibility and are working with simple, manually chosen colors. Use OKLCH when you are generating color palettes programmatically, building design systems, or need colors that look perceptually balanced across different hues. The key problem with HSL is that colors at the same lightness value can look very different in perceived brightness - a yellow at hsl(60, 100%, 50%) looks much brighter than a blue at hsl(240, 100%, 50%) even though the lightness value is identical. OKLCH does not have this problem: equal lightness values look equally light to the human eye, making it far more reliable for accessible, consistent palette generation.

CMYK stands for Cyan, Magenta, Yellow, and Key (Black) - the four ink channels used in color printing. Unlike RGB which mixes light, CMYK mixes pigments, so the two models produce different gamuts and converting between them is not always exact. CMYK is not currently a supported CSS color format for browsers, so you cannot use it directly in a stylesheet. Its value in this tool is as a reference for translating a digital web color into the nearest print-friendly equivalent when handing assets off to a print designer or press supplier.

Color schemes are based on the geometric relationships between hues on a color wheel. Complementary colors sit directly opposite each other (180° apart) and create maximum contrast. Analogous colors are adjacent on the wheel (30° apart) and create harmonious, low-contrast combinations. Triadic colors are evenly spaced at 120° intervals around the wheel, giving a balanced, vibrant palette of three colors. Tetradic (also called square or double complementary) uses four colors spaced 90° apart for a rich but complex palette. Split-complementary takes one base color and the two colors either side of its complement, softening the high contrast of a pure complementary pair. Monochromatic uses a single hue at varying lightness and saturation levels for a cohesive, minimal palette.

WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios between text and its background to ensure readability for users with visual impairments. The AA standard - the legal requirement for most websites - requires a contrast ratio of at least 4.5:1 for normal body text and 3:1 for large text (18pt or 14pt bold and above). The AAA standard is the enhanced level, requiring 7:1 for body text and 4.5:1 for large text. Contrast ratio is calculated from the relative luminance of the two colors, not their visual similarity, which is why two colors that look very different in hue can still fail the contrast check if their perceived brightness is similar.

Split the six-digit HEX code into three pairs of two characters, then convert each pair from hexadecimal (base 16) to decimal (base 10). For example, #FF5733 splits into FF, 57, and 33. FF in hex = 255 in decimal. 57 in hex = 87 in decimal. 33 in hex = 51 in decimal. So #FF5733 becomes rgb(255, 87, 51). You can do this conversion instantly using the tool above - just enter your HEX value and all equivalent formats including RGB are shown immediately.

CSS includes 140 named colors - keywords you can use directly in stylesheets instead of a numeric value. They range from the basic (red, blue, white, black) to the more specific (cornflowerblue, mediumaquamarine, papayawhip). Each named color has an exact HEX and RGB equivalent, for example cornflowerblue is #6495ED. This tool detects the closest named CSS color to any value you enter, which is useful when you want a quick human-readable label for a color or when working in a context where a named color is close enough to use directly.