Pickers & Converters·free · no signup

Color Picker

Pick any color and get every value designers and developers actually use. HEX, RGB, HSL, OKLCH — synced and copyable.

Current color
Royal Violet
Hex
Color values
HEX
#
RGB
R
G
B
HSL
H°
S%
L%
OKLCHPro
L
C
H°
Sliders
Hue252°
Saturation100%
Lightness68%
Alpha100%
Saturation × Lightness
Saturation
100%
Lightness
68%
Color harmonies

Computed from the current hue. Click a swatch to copy, or hover and use it as the new picked color.

CSS output
styles.css
Color info
Nearest name
Royal Violet
#7C5CFF
Luminance
0.192
Dark surface
Temperature
❄ Cool
23% warm
Hue family
Violet
252° · 100% sat
On white
The quick fox
Sample text in #7C5CFF
4.35:1
AA normal✕
AA large
AAA normal✕
AAA large✕
On black
The quick fox
Sample text in #7C5CFF
4.83:1
AA normal
AA large
AAA normal✕
AAA large
Related tools
Palette Generator
Build a 5-color palette from this color.
Tint & Shade
10 tints, 10 shades, from this color.
Aa
Aa
Contrast Checker
Test this color against any background.
Gradient Generator
Build a gradient starting at this color.

How to use the Color Picker

The picker maps your selection to every common color model at once. The 2D field controls saturation and lightness while the slider sets hue (0–360°); under the hood the same color is expressed as HEX (#RRGGBB), RGB (0–255 per channel), HSL and OKLCH, so editing any field re-derives the others. It also computes relative luminance to show live WCAG contrast against white and black.

  1. 1
    Pick a color

    Drag in the saturation/lightness field and move the hue slider, or paste an existing HEX, RGB, HSL or OKLCH value into its input.

  2. 2
    Fine-tune the values

    Type directly into any model field — change one channel and the preview plus all other formats update in the same frame. Use the alpha slider for transparency.

  3. 3
    Read the extras

    Check the nearest named color, harmonies, warm/cool temperature and the contrast ratios against black and white shown beside the swatch.

  4. 4
    Copy what you need

    Click any format to copy it to your clipboard for use in CSS, design tools or code.

Frequently asked

What is the difference between HEX, RGB, HSL and OKLCH?
HEX and RGB describe the same red/green/blue mix (HEX is just hexadecimal RGB). HSL restates that as hue, saturation and lightness, which is friendlier for tweaking. OKLCH is perceptually uniform, so equal numeric steps look like equal visual steps.
Does the color picker upload or store my colors?
No. Everything is computed locally in your browser — nothing is sent to a server, so it works offline and keeps your work private.
How is the contrast ratio against black and white calculated?
It uses the WCAG relative-luminance formula. Ratios run from 1:1 to 21:1; aim for at least 4.5:1 for normal body text.
What does the alpha value control?
Alpha is opacity from 0 (fully transparent) to 1 (fully opaque). It is reflected in the rgba()/hsla() and 8-digit HEX outputs.

More pickers & converters

HEX ↔ RGB ↔ HSL
Convert between every color format — HEX, RGB, HSL, HSV, OKLCH — instantly.
Color Name Finder
Find the name of any color, and the HEX of any named color.
Color Mixer
Mix two colors together and see the blended result at any ratio.