> convert | preview | pick <

A: HEX and RGB represent the same color model (red, green, blue) but in different notations. HEX uses hexadecimal (#FF5733) while RGB uses decimal values (rgb(255, 87, 51)). They are interchangeable and both widely used in CSS.

A: HSL stands for Hue, Saturation, Lightness. It is a more intuitive color model for humans — you can easily adjust how bright, vivid, or warm a color is by changing individual values. CSS natively supports hsl() notation.

A: CMYK (Cyan, Magenta, Yellow, Key/Black) is the color model used in print. If you are designing for physical media like business cards, brochures, or posters, you need CMYK values. Note that not all RGB colors can be reproduced in CMYK.

A: Modern browsers support HEX (#FF5733), RGB (rgb(255, 87, 51)), HSL (hsl(11, 100%, 60%)), named colors (e.g. 'tomato', 'coral'), and newer formats like hwb(), lab(), lch(), oklch(). HEX and RGB are the most widely used.

A: The color format does not affect accessibility directly, but understanding color values helps you calculate contrast ratios. WCAG 2.1 requires a minimum contrast ratio of 4.5:1 for normal text. HSL is particularly useful for adjusting lightness to meet contrast requirements.

A: Split the 6-digit HEX into three 2-digit pairs (RR, GG, BB) and convert each pair from hexadecimal to decimal. For #FF5733: FF = 255, 57 = 87, 33 = 51, which gives rgb(255, 87, 51). A 3-digit shorthand like #F53 expands to #FF5533. In code: parseInt('FF', 16) in JavaScript or int('FF', 16) in Python.

A: Convert each channel (0–255) to a 2-digit hex number and concatenate. For rgb(255, 87, 51): 255 → FF, 87 → 57, 51 → 33, giving #FF5733. JavaScript one-liner: '#' + [r,g,b].map(x => x.toString(16).padStart(2,'0')).join(''). Python: '#{:02X}{:02X}{:02X}'.format(r,g,b).

A: First normalize RGB to 0–1 by dividing by 255. Then:
K = 1 − max(R, G, B)
C = (1 − R − K) / (1 − K)
M = (1 − G − K) / (1 − K)
Y = (1 − B − K) / (1 − K)
If K = 1 (pure black), set C = M = Y = 0. For rgb(255, 87, 51): K = 0, C = 0, M = 0.66, Y = 0.80, giving cmyk(0%, 66%, 80%, 0%). Note that CMYK is device-dependent — your final printed color depends on the printer's ink mix, paper, and color profile (ICC).

A: Normalize RGB to 0–1 first. Let M = max(R,G,B), m = min(R,G,B), Δ = M−m.
Lightness: L = (M + m) / 2
Saturation: S = 0 if Δ = 0, else Δ / (1 − |2L − 1|)
Hue: 0 if Δ = 0; otherwise based on which channel is max (R: (G−B)/Δ mod 6; G: (B−R)/Δ + 2; B: (R−G)/Δ + 4), multiplied by 60 degrees. Our converter does all of this instantly as you type.

A: Both use hue (0–360°) and saturation, but the third component is different:
• HSL: Lightness — 0% is black, 50% is the pure hue, 100% is white
• HSV/HSB: Value/Brightness — 0% is black, 100% is the pure hue (white is S=0%, V=100%)
HSL is symmetric around the pure hue, which makes it feel more natural for lightening and darkening. HSV matches what you see in classic color pickers (Photoshop, Sketch, Figma's HSB slider) because it mirrors how a painter thinks about adding white or black pigment.

A: For most web work, use HEX when you are copying a brand color or designer handoff (short, case-insensitive, universal). Use RGB/RGBA when you need alpha (rgba(255, 87, 51, 0.5)) and old-school compatibility. Use HSL/HSLA when you are generating color variations programmatically (easy to lighten/darken by tweaking L). Modern CSS also supports oklch() and lab() for perceptually uniform color manipulation — good for design systems but still ramping up in browser support.

A: Screens use additive RGB (mixing light) while print uses subtractive CMYK (mixing ink). Many saturated RGB colors — especially bright blues and greens — are outside the CMYK gamut and will shift noticeably when printed. For brand colors that must look identical across media, work in Pantone spot colors or verify your CMYK values with a print proof. Monitor calibration (ICC profile, color temperature) also matters: two screens displaying the same HEX can look noticeably different.

A: RGBA adds an alpha channel (0.0–1.0, or 0–255) representing opacity. rgba(255, 87, 51, 0.5) is 50% transparent. In modern CSS you can also use 8-digit HEX like #FF573380, where the last two hex digits are the alpha (80 = 128 = 50%). Alpha affects how the color blends with whatever is behind it — it is not part of the color itself.

A: A quick cheat sheet for the most common colors: