Color Picker
Pick colors and get them in multiple formats: HEX, RGB, HSL, HSV, CIE Lab, CIE LCH, OKLCH, and CSS color()
Design
Development
CSS
Colors
Color Picker
Use the color picker or enter a hex value to select your color
Color Palette
Click on any color to select it
Color Format Guide
Understanding when and how to use different color formats
Basic Formats
HEX: Web standard format
Used in CSS, HTML, and most design tools. Compact and widely supported.
RGB: Red, Green, Blue (0-255)
Device-dependent format. Good for screen displays and digital media.
HSL: Hue, Saturation, Lightness
Intuitive for designers. Easy to create color variations and themes.
HSV: Hue, Saturation, Value
Common in image editing software. Similar to HSL but different lightness model.
Professional Formats
CIE Lab: Perceptually uniform
Device-independent. Excellent for color matching, print workflows, and scientific applications.
CIE LCH: Lab in cylindrical coordinates
Easier to understand than Lab. Great for creating harmonious color palettes and gradients.
OKLCH: Perceptually uniform modern format
Better than CIE LCH for digital displays. Excellent for consistent color manipulation and CSS.
Modern CSS
CSS color(): Future-proof format
Supports wide color gamuts (P3, Rec2020). Use for modern browsers and HDR displays.
When to Use Each Format
Web Development
- • HEX/RGB: Standard web colors
- • HSL: Dynamic color schemes
- • OKLCH: Modern perceptual color manipulation
- • CSS color(): Wide gamut displays
Print & Production
- • CIE Lab: Color matching across devices
- • CIE LCH: Consistent color relationships
Design Tools
- • HSL/HSV: Color wheel interfaces
- • RGB: Digital artwork
Scientific/Technical
- • CIE Lab: Color difference calculations
- • CIE LCH: Perceptual color analysis
Browser Support
Widely Supported
- • HEX, RGB, HSL - All browsers
- • HSV - Design tools only
Modern Browsers
- • CSS color() - Chrome 111+, Firefox 113+
- • OKLCH - Chrome 111+, Firefox 113+, Safari 15.4+
- • CIE Lab/LCH - Limited CSS support
Quick Tips
- • Use the color picker for precise selection
- • Click palette colors for quick choices
- • Copy any format with one click
- • Lab/LCH values may look different on screen
- • CSS color() requires modern browser support
- • HSL is great for programmatic color generation
OKLCH Color FAQ
What is the OKLCH color format?
OKLCH is a modern color format based on the perceptually uniform OKLab color space, using Lightness (L), Chroma (C), and Hue (H) components. It is designed for more accurate and intuitive color manipulation.
What are the benefits of OKLCH?
OKLCH provides perceptual uniformity, meaning color changes are visually consistent. It enables easier color manipulation, better accessibility, and supports a wider color gamut for modern displays.
What is the difference between LCH and OKLCH?
Both are cylindrical color spaces, but OKLCH is based on OKLab (more perceptually uniform and modern), while LCH is based on CIE Lab. OKLCH offers better consistency and is more suitable for digital design.
How does OKLCH work and how do I read it?
OKLCH uses three values: L (lightness, 0–1), C (chroma, color intensity), and H (hue, angle in degrees). For example, oklch(0.7 0.15 240) means 70% lightness, 0.15 chroma, and a hue of 240° (blue).
Should I use OKLCH for web design?
Yes, if you target modern browsers. OKLCH is recommended for accessible, consistent, and flexible color systems, especially for dynamic theming and design systems.
Does CSS support OKLCH?
Yes, modern browsers like Chrome 111+, Firefox 113+, and Safari 15.4+ support OKLCH in the CSS color() function.
Does Figma or React Native support OKLCH?
Figma does not natively support OKLCH yet. React Native does not support OKLCH in styles out of the box; you may need to convert OKLCH to RGB for use.
Why does Tailwind CSS use OKLCH?
Tailwind CSS uses OKLCH for its color palette to provide more perceptually uniform and accessible colors, making it easier to create visually balanced designs.