Color Picker
To pick a color, click anywhere on the spectrum below and drag to select the exact shade you want. Get color codes for HEX, RGB, HSL, CMYK and more, ready to copy.
1Pick your color
Drag the spectrum2Adjust hue and opacity
Hue
Alpha
3Copy your code
Color pickers based on color models
Colors are written in different formats, called color models, like HEX, RGB and HSL. Each one was made for a different job: HEX and RGB for screens, CMYK for printing, HSL for picking colors by hand. Here is a simple breakdown of what each one means, with an example.
Instantly pick any color code easily from your browser
↗Color PickerPick any shade on the spectrum and copy it in every format.↗HEXRead a six-digit HEX code for any color you choose.↗RGBSet red, green and blue and copy the rgb() value.↗HSLChoose by hue, saturation and lightness.↗HSVTune hue, saturation and value for any shade.↗CMYKGet print-ready cyan, magenta, yellow and key.↗RGBAAdd an alpha channel for see-through colors.↗HSLAAn HSL color with adjustable opacity.↗OKLCHPerceptually even colors in modern OKLCH.↗LCHWork in the CIELAB-based LCH space.↗CSS ColorsGrab any color as a ready-to-paste CSS value.↗Web-SafeChoose from the classic 216 web-safe colors.↗Named MatchFind the closest named, Pantone-style swatch.↗Kelvin LightTurn a Kelvin value into warm or cool light.
Color groups
↗PrimaryRed, yellow and blue with full shade ramps.↗SecondaryOrange, green and purple, plus screen mixes.↗TertiaryIn-between hues like red-orange and blue-green.↗RainbowEvery hue from red through violet.↗NeutralsGrays, beiges, taupes and slates.↗PastelsSoft mints, blushes and baby blues.↗Earth TonesTerracotta, ochre, olive and clay.↗NeonsElectric greens, hot pinks and vivid cyans.
Pick from source
Color converters
↗Color ConverterConvert any color into HEX, RGB, HSL, HSV, CMYK and OKLCH all at once, instantly.↗HEX to RGBTurn any HEX code into its rgb() value instantly, ready to copy for CSS or code.↗RGB to HEXTurn any rgb() value into a clean HEX code instantly, ready for CSS or a brand guide.↗HEX to HSLTurn any HEX code into HSL instantly, ready to tune by hue, saturation and lightness.↗HSL to HEXTurn any HSL value into a clean HEX code instantly, no signup needed.↗RGB to HSLTurn any rgb() value into HSL instantly, ready to tune by hue, saturation and lightness.↗HSL to RGBTurn any HSL value into rgb() instantly, no signup needed.↗HEX to CMYKTurn any HEX code into print-ready CMYK instantly, no signup needed.↗CMYK to HEXTurn any CMYK value into a web-ready HEX code instantly, no signup needed.↗RGB to CMYKTurn any rgb() value into print-ready CMYK instantly, no signup needed.
Palettes Generator
↗Palette GeneratorGenerate beautiful color palettes instantly, with your favorites locked in place.↗Scheme GeneratorBuild complementary, analogous, triadic and more color schemes from one base color.↗Shades GeneratorGenerate a full lightness scale of tints and shades from any color, instantly.↗Random ColorGenerate a random color with its HEX, RGB and HSL values.↗Random Color PickerRoll a random color and copy its HEX, RGB and HSL codes.↗Color MixerMix two colors together and find every blend in between.
Gradients
↗CSS GradientBuild a CSS gradient visually and copy ready-to-use code.↗Gradient GeneratorCreate linear and radial gradients with unlimited color stops.↗Radial GradientGenerate a radial gradient that spreads out from a center point.↗Conic GradientCreate a conic gradient that sweeps colors around a center.↗Gradient BackgroundBuild a smooth gradient background and copy the CSS.
Accessibility
↗Contrast CheckerCheck the contrast ratio between two colors and see if it passes WCAG.↗WCAG CheckerTest text and background colors against WCAG AA and AAA standards.↗Accessibility CheckMake sure your color pairing is readable for everyone.↗Color Blindness SimulatorSee your image the way people with color vision deficiency do. Upload anything and preview protanopia, deuteranopia, tritanopia and more.