Color Converter
Color preview (click the swatch)
#164e63
RGB
0-255
0-255
0-255
HSL
0-360
0-100%
0-100%
Share with friends
How to use
- 1 Pick a color from the swatch, or paste any HEX (#FF5733), RGB (rgb(255,87,51)), HSL, or OKLCH value into any field.
- 2 All other format fields update simultaneously — copy whichever your stylesheet uses.
- 3 WCAG contrast ratio against black and white shows whether your color passes AA (4.5:1) or AAA (7:1) for body text.
- 4 OKLCH is the modern format for perceptually uniform palettes — equal L values look equally bright across hues, unlike HSL.
- 5 All conversions follow W3C CSS Color Module Level 4 round-trip rules so values stay consistent.
About Color Converter
FAQ
Q How do I convert HEX to RGB by hand?
Split the 6 hex digits into 3 pairs and convert each from hex to decimal. #FF5733 splits into FF (255), 57 (87), 33 (51), giving rgb(255, 87, 51). For 3-digit shorthand like #F53, double each digit: #F53 = #FF5533.
Q What is the difference between HSL and HSV?
Both use hue (0–360°) and saturation, but lightness vs. value differ. In HSL, 100% lightness is white and 50% is the pure color. In HSV, 100% value is the pure color and lightness is implicit. Photoshop and Sketch use HSV; CSS uses HSL. Same color, different geometry.
Q When should I use OKLCH instead of HSL?
Use OKLCH when generating systematic palettes (tints, shades, accessible variants) where you need equal-brightness colors across hues. HSL fails here — same L value gives very different perceived brightness. OKLCH is the W3C-recommended modern choice and is supported in all major browsers since 2023.
Q Is my color WCAG accessible?
A color passes WCAG 2.1 AA against a background when the contrast ratio is at least 4.5:1 for normal text, or 3:1 for large text (18pt+ or 14pt+ bold). AAA requires 7:1 and 4.5:1 respectively. The contrast checker shows your color's ratio against both black and white text.
Q Why does my brand color look different in print?
Web colors are in the sRGB color space; print uses CMYK. Vivid colors (especially blues, oranges, purples) often have no exact CMYK equivalent and shift toward duller versions. For brand-critical printing, work from spot color (Pantone) or ask your printer for CMYK proof prints.
Q What does the # in #FF5733 mean?
It's the CSS / HTML convention for hex color. Some tools use 0x (C-language style: 0xFF5733), some use $ (Sass/SCSS variables). All represent the same 24-bit color. The # is required in CSS but optional in many tools that auto-detect hex.
Q How many colors can a 6-digit hex represent?
16,777,216 — that's 256 (red levels) × 256 (green) × 256 (blue), the full 24-bit sRGB gamut. The 8-digit form #RRGGBBAA adds alpha channel for transparency, giving 4.3 billion possible combinations. Modern displays still can't show every distinguishable color in this range.
Q Can I convert between rgb() and rgba() losslessly?
rgba() adds an alpha channel — converting rgba(255, 87, 51, 0.5) to rgb() loses the transparency. CSS Color 4 unifies them: <code>rgb(255 87 51 / 50%)</code> is the modern syntax accepting optional alpha. The same applies to hsl/hsla and the 6-vs-8 digit hex forms.
Official resources
W3C CSS Color Module Level 4
Authoritative W3C specification of CSS color formats including OKLCH and OKLAB.
WCAG 2.1 — Contrast Minimum
Web Content Accessibility Guidelines color contrast requirements (AA and AAA).
MDN — CSS color value
MDN Web Docs reference for all CSS color formats and browser support tables.
WebAIM — Contrast Checker
WebAIM accessibility-focused contrast checker, the industry standard for accessibility audits.