Color Picker

Pick a color and get HEX, RGB, HSL and HSV. Browse 580+ named colors, build grad...

SecureFastFree

Updated

Everything runs in your browser. Colors, palettes and gradients are computed locally, nothing is uploaded.
#3498db

rgb(52, 152, 219) · hsl(204, 70%, 53%)

Quick answer

A color picker lets you select a color and read its exact values in HEX, RGB, HSL, and HSV. YaliKit's picker also includes a searchable library of over 580 named colors from CSS, Tailwind, and Material, builds linear and radial gradients with copy-ready CSS, generates harmonies, shades, and tints, and checks WCAG contrast. It runs fully in your browser.

SSL Secured
256-bit Encryption
Cloud Processing
Mobile Friendly

Everything In One Place

Live Picker - Spectrum + hue, all in sync
580+ Colors - CSS, Tailwind, Material
Gradients - 2-5 stops, copy CSS
Harmonies - 5 color schemes
WCAG Contrast - AA and AAA checks
Eyedropper - Sample any pixel

Why Use Color Picker?

A Library of Hundreds of Colors

Browse 580+ named swatches in one searchable grid: all 148 CSS colors, the full Tailwind palette and the Material Design set. Search by name or hex and copy any swatch with one click. Most pickers give you a wheel and nothing else.

Smooth Gradients With Copy-Ready CSS

Build 2 to 5 stop linear or radial gradients, drag positions, set the angle, and start from a dozen hand-picked presets. The exact background: linear-gradient(...) CSS updates live and copies in one tap.

Everything Updates Instantly

HEX, RGB, HSL and HSV stay in sync as you drag the spectrum. Harmonies, shades, tints and the contrast ratio all recompute the moment you change the color. No buttons, no waiting.

100% Private, Runs In Your Browser

There is no server and no upload. Even the pick-from-image feature reads the pixels locally with a canvas, so your images and colors never leave your device.

What You Can Do

Web And UI Design

Pick exact HEX and RGB values, grab Tailwind or Material swatches, and build a shade scale for your design system.

Brand Palettes

Use harmonies to build a balanced brand palette from a single starting color, then copy each value.

CSS Gradients

Design linear and radial backgrounds and copy the ready-to-paste CSS for buttons, heroes and cards.

Accessibility Contrast

Check text on background against WCAG AA and AAA so your copy stays readable for everyone.

How It Works

1

Pick Your Color

Drag the spectrum and hue slider, type a HEX, RGB or HSL value, use the eyedropper, or click a pixel in an uploaded image. The big preview and every format update instantly.

2

Explore Palettes

Open Harmonies for complementary, analogous, triadic and more, or Shades to get a 10-step light-to-dark scale. Browse the Library to grab a named color, or build a gradient.

3

Copy And Use

Click any value, swatch or the CSS string to copy it. A quick Copied confirmation appears. Paste straight into your CSS, design tool or code.

Pro Tips

Start From A Harmony

Pick one color you like, open Harmonies, and use the triadic or analogous set as the backbone of a full palette. It is faster than guessing color by color.

Aim For 4.5:1 On Text

For normal body text, keep the contrast ratio at 4.5:1 or higher to pass WCAG AA. Large or bold text can go as low as 3:1.

Everything Copies On Click

Any value, swatch, gradient CSS or harmony color copies with a single click. Build a palette by clicking through and pasting as you go.

Frequently Asked Questions

Type or paste a HEX code into the picker and the RGB, HSL and HSV fields update instantly with the matching values. Each one has a copy button, so you can grab the exact format you need without any conversion step.
Over 580 named swatches: all 148 CSS named colors, the full Tailwind CSS palette (22 hues across 11 shades) and the Material Design palette (19 hues across 10 shades). Search by name or by hex and click any one to copy it.
Open the Gradient tab, choose linear or radial, add up to five color stops, drag their positions and set the angle. The exact background gradient CSS updates live at the top, and one tap copies it ready to paste into your stylesheet.
A harmony is a set of colors that work well together because of their positions on the color wheel. This tool shows complementary, analogous, triadic, tetradic and split-complementary sets for whatever color you have picked, and each swatch copies on click.
Open the Contrast tab and set a text color and a background color. It shows the exact WCAG contrast ratio and whether the pair passes AA and AAA for both normal and large text, with a live text sample so you can see it in context.
A shade mixes a color toward black to make it darker, while a tint mixes it toward white to make it lighter. The Shades tab gives you a 10-step scale of each for the color you have picked, useful for building a consistent palette.
The screen eyedropper uses the browser EyeDropper API, which works in Chrome and Edge. The button only appears when your browser supports it. If it does not, you can still pick a color from an uploaded image, which works everywhere.

Related Tools

Gradient Generator

Design smooth gradients and copy the CSS

CSS Gradient Generator

Visual linear and radial CSS gradients

Image Color Picker

Extract colors from any image

Color Converter

Convert between HEX, RGB, HSL and more