What is the difference between HEX, RGB, HSL, and HSV color formats?

HEX is a compact hexadecimal notation (#RRGGBB) primarily used in CSS and web development. RGB defines colors using Red, Green, and Blue channel values from 0-255. HSL uses Hue (0-360 degrees), Saturation, and Lightness percentages, making it intuitive for color adjustments. HSV is similar but uses Value instead of Lightness, which is the standard in graphic design tools like Photoshop and Figma.

What is OKLCH and why should I use it?

OKLCH is a modern perceptually uniform color space supported in CSS Color Level 4. Unlike HSL where perceived brightness varies wildly between hues (yellow appears much brighter than blue at the same lightness), OKLCH ensures consistent perceived lightness across all hues. This makes it ideal for creating accessible color palettes with predictable contrast ratios.

How does alpha transparency work in color values?

Alpha is a fourth channel (0 to 1, or 0% to 100%) that controls the opacity of a color. An alpha of 1 means fully opaque, while 0 means fully transparent. In CSS, you can use rgba(), hsla(), or the modern color function syntax with a slash notation (e.g., rgb(59 130 246 / 0.5)) to specify transparency.

Which color format should I use for CSS?

For most CSS work, HEX codes (#3b82f6) are the most common and compact choice. Use HSL when you need to programmatically adjust lightness or saturation (great for theme variants). Use OKLCH for modern browsers when you need perceptually uniform color manipulation. Use RGB or RGBA when you need transparency or when working with JavaScript color calculations.

Can I use this tool to check color accessibility and contrast?

While this tool focuses on color selection and format conversion, the OKLCH format it provides is specifically designed for perceptual uniformity, which helps in creating accessible color schemes. For full WCAG contrast ratio checking, pair this tool with a dedicated contrast checker, using the color values you copy from here.

Color Picker - HEX RGB HSL HSV OKLCH Converter | Free Online Tool

Select Color

RGB

Color Values

HEX

#3B82F6

RGB

rgb(59, 130, 246)

HSL

hsl(217, 91%, 60%)

Color Palette

Click to select and copy

base

slate

gray

zinc

neutral

stone

red

orange

amber

yellow

lime

green

emerald

teal

cyan

sky

blue

indigo

violet

purple

fuchsia

pink

rose

Color Formats

HEX

#RRGGBB format. Most commonly used in CSS

RGB

Red, Green, Blue (0-255)

HSL

Hue, Saturation, Lightness. Intuitive color adjustment

HSV/HSB

Hue, Saturation, Value. Used in graphic tools

OKLCH

Perceptually uniform modern CSS color space

RGBA/HSLA

Includes alpha (transparency) channel

What is a Color Picker?

A Color Picker is an essential tool for designers and developers that allows you to select, preview, and convert colors between multiple color formats. Colors on the web and in digital design are represented using various color models — HEX codes for CSS, RGB for screen displays, HSL for intuitive hue/saturation adjustments, HSV for graphic design tools, and OKLCH for perceptually uniform modern CSS. This tool provides instant bidirectional conversion between all these formats, along with an interactive color selector, palette generator, and random color feature — all running in your browser with no data uploaded.

Interactive visual color selector with hue, saturation, and lightness controls
Instant conversion between HEX, RGB, HSL, HSV, and OKLCH color formats
Alpha (transparency) channel support for all applicable formats
One-click copy of any color value to clipboard for quick use in code
Random color generator for design inspiration and prototyping
Curated color palette with click-to-select convenience

How to Use

1
Select a Color
Use the interactive color picker to visually choose a color, or enter a specific value in any supported format (HEX, RGB, HSL, HSV, or OKLCH). You can also click a color from the built-in palette.
2
View All Formats
Once a color is selected, all format conversions are displayed simultaneously. See the HEX code, RGB values, HSL percentages, HSV values, and OKLCH coordinates for your chosen color.
3
Copy Color Values
Click the copy button next to any color format to instantly copy it to your clipboard. Use HEX for CSS, RGB for JavaScript canvas, HSL for CSS custom properties, or OKLCH for modern CSS.
4
Adjust Alpha Transparency
Switch to the Alpha tab to add transparency to your color. Adjust the alpha slider to create semi-transparent colors for overlays, backgrounds, and glass-morphism effects.
5
Explore and Experiment
Use the Random Color button for design inspiration, or browse the curated color palette to find pre-selected colors that work well together.

Frequently Asked Questions

Tips & Best Practices

Use HSL format when creating theme variations — simply adjust the lightness value to create consistent light and dark shades of the same hue.
When designing for accessibility, use OKLCH to ensure consistent perceived brightness across different hues in your color palette.
Save frequently used brand colors by copying their HEX codes to a design system document for consistent reuse across projects.
Use the alpha channel to create layered visual effects like frosted glass, overlays, and subtle shadow colors rather than using separate opacity properties.
When converting between formats, note that some color spaces have different gamuts — OKLCH can represent colors that HEX/RGB cannot display on standard sRGB screens.

What is a Color Picker?

Interactive visual color selector with hue, saturation, and lightness controls

Instant conversion between HEX, RGB, HSL, HSV, and OKLCH color formats

Alpha (transparency) channel support for all applicable formats

One-click copy of any color value to clipboard for quick use in code

Random color generator for design inspiration and prototyping

Curated color palette with click-to-select convenience

How to Use

Select a Color

Use the interactive color picker to visually choose a color, or enter a specific value in any supported format (HEX, RGB, HSL, HSV, or OKLCH). You can also click a color from the built-in palette.

View All Formats

Once a color is selected, all format conversions are displayed simultaneously. See the HEX code, RGB values, HSL percentages, HSV values, and OKLCH coordinates for your chosen color.

Copy Color Values

Click the copy button next to any color format to instantly copy it to your clipboard. Use HEX for CSS, RGB for JavaScript canvas, HSL for CSS custom properties, or OKLCH for modern CSS.

Adjust Alpha Transparency

Switch to the Alpha tab to add transparency to your color. Adjust the alpha slider to create semi-transparent colors for overlays, backgrounds, and glass-morphism effects.

Explore and Experiment

Use the Random Color button for design inspiration, or browse the curated color palette to find pre-selected colors that work well together.

Tips & Best Practices

Use HSL format when creating theme variations — simply adjust the lightness value to create consistent light and dark shades of the same hue.

When designing for accessibility, use OKLCH to ensure consistent perceived brightness across different hues in your color palette.

Save frequently used brand colors by copying their HEX codes to a design system document for consistent reuse across projects.

Use the alpha channel to create layered visual effects like frosted glass, overlays, and subtle shadow colors rather than using separate opacity properties.

When converting between formats, note that some color spaces have different gamuts — OKLCH can represent colors that HEX/RGB cannot display on standard sRGB screens.