HomeDevHTML Color Picker
Color tools

HTML Color Picker

Free HTML color picker: drag the color map or use the hue slider to get HEX, RGB, HSL, and HSV codes for CSS and HTML. Runs locally in your browser.

Loading tool…

Loading Preparing tool…

How to use

Follow these steps for a clear answer.

1

Pick a color

Click or drag on the saturation/brightness map, move the hue slider, or open the HTML5 color control.

2

Fine-tune codes

Edit HEX or R/G/B (0–255). HSL and HSV update live with the selection.

3

Copy into CSS

Use Copy next to each format, then paste into stylesheets or inline styles.

Color formulas

Core relationships used by this color tool.

HEX from RGB#RRGGBB (each channel 00–FF)
RGB channelsR, G, B ∈ [0, 255]
HSL (CSS)hsl(H°, S%, L%)
HSV (picker)hsv(H°, S%, V%)
iHSV drives the map and hue slider; HEX, RGB, and HSL are derived for CSS. Conversions run locally in the browser.

Example colors

Common picks with formula and result.

ϟ

Pure red

Full red channel

rgb(255, 0, 0)
#FF0000 · hsl(0, 100%, 50%)
ϟ

Accent orange

Common UI accent

hsv(14, 80%, 100%)
#FF5733 · rgb(255, 87, 51)
ϟ

White

All channels max

rgb(255, 255, 255)
#FFFFFF · hsl(0, 0%, 100%)
ϟ

Black

All channels zero

rgb(0, 0, 0)
#000000 · hsl(0, 0%, 0%)

HTML color picker specification

Version 1.0.0 · Last reviewed 2026-07-28

Definition
An HTML color picker is a visual tool for selecting a screen color and reading equivalent HEX, RGB, HSL, and HSV codes for HTML and CSS. There are 16,777,216 possible six-digit hex colors (#RRGGBB).
What it calculates
Live HEX, RGB, HSL, and HSV codes for the selected color, plus a contrast preview with black and white text.
Inputs
  • Saturation / value from the 2D color map
  • Hue from the rainbow slider (0–360°)
  • Optional HEX string or R/G/B integers
  • Optional native HTML5 color input
Outputs
  • HEX (#RRGGBB)
  • RGB (0–255 per channel)
  • HSL string for CSS
  • HSV string for design workflows
Formula
HEX ↔ RGB ↔ HSL ↔ HSV (sRGB); map uses HSV hue + S/V

Use the preview swatch to judge black text vs white text on the selected fill before copying a code into CSS.

Shades, tints, and tones: darken toward black (shade), lighten toward white (tint), or mix gray (tone) by nudging brightness or RGB after locking a hue.

Harmonies: complementary, analogous, and triadic schemes start from one base hue—pair this picker with a color wheel when you need a full palette.

.card {
  background-color: #FF5733;
  border: 2px solid rgb(255, 87, 51);
  color: #FFFFFF;
}
Format cheat sheet
FormatExampleCSS usage
HEX#FF5733color: #FF5733;
RGBrgb(255, 87, 51)background-color: rgb(255, 87, 51);
HSLhsl(14, 100%, 60%)border-color: hsl(14, 100%, 60%);
HSVhsv(14, 80%, 100%)Convert to HEX/RGB/HSL for CSS
i HEX and RGB are interchangeable; HSL is CSS-native; HSV is ideal while picking visually.
Assumptions
  • Colors are treated as opaque sRGB for web use.
  • All conversion runs in the browser; nothing is uploaded.
  • HSV is the interactive model; other formats are derived.
Units
  • HEX: #RRGGBB
  • RGB: 0–255
  • HSL / HSV: hue in degrees; S, L, V in percent
Boundary conditions
  • Invalid HEX is ignored until a valid 3- or 6-digit code is entered.
  • R, G, B are clamped to 0–255.
  • Hue wraps in [0, 360); saturation and value clamp to [0, 1].
Example
hsv(14, 80%, 100%) → #FF5733 → rgb(255, 87, 51)
Validation cases
  • rgb(255, 0, 0) → #FF0000
  • rgb(0, 0, 0) → #000000
  • hsv(14, 80%, 100%) → #FF5733
  • #FFF → #FFFFFF
Sources
  • sRGB / CSS Color Module (HEX, RGB, HSL)
  • HSV model as used by interactive color pickers
Last reviewed
2026-07-28
Calculation version
1.0.0
RGB RGB color codes › # HTML color codes › ✓ Color checker › ◎ Color wheel › ⇄ HEX to RGB ›

Frequently asked questions

Key distinctions behind the tool.

What is an HTML color picker?

A visual tool that lets you select a color and read HEX, RGB, HSL, HSV, and similar codes for web design—without installing software.

How do hex codes work?

A six-digit hex code #RRGGBB uses base-16 pairs for red, green, and blue (00–FF each). Example: #FF0000 is pure red; #000000 is black.

What is the difference between RGB and HSV?

RGB mixes red, green, and blue channels (0–255). HSV uses hue, saturation, and value (brightness), which matches how many visual pickers work.

Can I use HSV directly in CSS?

Prefer HEX, rgb(), or hsl() in stylesheets. Use HSV while picking, then copy HEX/RGB/HSL from the tool.

Does the picker upload my colors?

No. Selection and conversion run locally in your browser.