Color Picker
Explore any color — variations, harmony and accessibility.
Updated June 2026
Tints & shades
From −40 (darkest) to +40 (lightest) lightness. Click any swatch to copy its hex.
Harmony
Accessibility
WCAG AA needs a contrast ratio of at least 4.5:1 for normal text. Use whichever of black or white passes as your text color over this color.
How to use the Color Picker
- 1
Pick a color
Use the native color picker or type a 3- or 6-digit hex value. The two stay in sync.
- 2
Read the values
See the HEX, RGB and HSL codes and copy any of them, plus tints, shades and harmony swatches.
- 3
Check accessibility
The contrast against white and black shows which passes WCAG AA for readable text.
About this tool
A color picker lets you choose a color and instantly read its values in every common format. This hex color picker shows the HEX, RGB and HSL codes for any color you pick, each with a one-click copy button, so you can drop the exact value straight into CSS, a design file or code. Designers and developers use it dozens of times a day to grab, convert and document colors.
Beyond raw values, the tool helps you build with a color. The tints and shades row generates nine lighter and darker steps so you can create a consistent scale, and the harmony section shows the complementary, analogous and triadic colors derived from the hue — the foundation of a balanced palette. Every swatch is clickable to copy its hex.
It also checks accessibility: the contrast ratio against pure white and pure black tells you which makes readable text over your color, and whether it clears the WCAG AA threshold of 4.5:1. Everything runs locally in your browser — no colors are uploaded, logged or stored.
Examples
Input
Hex #955f3b
Output
rgb(149, 95, 59) · hsl(24, 43%, 41%)
The same warm brown shown in HEX, RGB and HSL.
Input
Harmony for #955f3b
Output
Complementary #3c7296 · Triadic #3c9660 and #603c96
Harmony swatches are derived by rotating the hue.
Input
#955f3b accessibility
Output
5.28:1 vs white (AA pass) · 3.98:1 vs black (AA fail)
White text is the accessible choice over this color.
Common uses
- Developers grabbing a color's exact HEX, RGB or HSL value for CSS
- Designers building a consistent tint and shade scale from one base color
- Brand and product teams generating complementary or triadic palette ideas
- Frontend engineers checking whether black or white text passes WCAG over a color
- Marketers matching a brand color and copying it across formats
- Anyone converting a hex color to RGB or HSL without doing the math by hand
Frequently asked questions
What formats does the color picker support?+
It shows HEX (e.g. #955f3b), RGB (e.g. rgb(149, 95, 59)) and HSL (e.g. hsl(24, 43%, 41%)). You can copy any of the three with one click.
What are tints and shades?+
Tints are lighter versions of a color and shades are darker ones. The tool generates nine steps by adjusting lightness from −40 to +40, giving you a ready-made scale.
What do complementary, analogous and triadic mean?+
They are color harmonies based on hue. Complementary is the opposite hue (180°), analogous are the neighbours (±30°), and triadic are evenly spaced (±120°) — useful starting points for a palette.
How does the accessibility check work?+
It computes the WCAG contrast ratio of your color against white and against black. A ratio of 4.5:1 or higher passes WCAG AA for normal text, so you can tell which makes readable text.
Are my colors uploaded anywhere?+
No. Everything runs locally in your browser. Nothing is sent to a server, logged or stored.
Learn more
WCAG Color Contrast Explained
Color contrast is the measurable difference in brightness between two colors — usually text and the background behind it. The Web Content Accessibility…
3 min readColor Harmony: Complementary, Analogous & Triadic
Color harmony is the art of choosing colors that look deliberate together rather than accidental. It is not mysterious taste — it is geometry. Almost every…
3 min readHEX, RGB and HSL Color Codes Explained
Open any stylesheet and you'll find colors written in several different ways — #ff0000, rgb(255, 0, 0), and hsl(0, 100%, 50%). These all describe the exact…
Related tools
Color Contrast Checker (WCAG)
Check WCAG color contrast between text and background and see AA/AAA pass or fail.
Color Blindness Simulator
Preview how your colors look to color-blind users.
Color Names
Browse named colors with their hex and RGB codes.
Color Palette Generator
Auto-generate balanced color palettes.
CSS Gradient Maker
Build CSS gradients with a live preview.
Palette Creator
Build a color palette from scratch.
Embed this tool
Free to use on your own site — it stays fast and private for your visitors.
Paste this where you want the tool to appear:
<iframe src="https://hypercho.com/embed/color-picker" title="Color Picker by Hypercho" width="100%" height="560" style="border:1px solid #d8cec3;border-radius:16px;max-width:720px" loading="lazy"></iframe>
<p style="font:13px sans-serif"><a href="https://hypercho.com/tools/color-picker" target="_blank" rel="noopener">Color Picker</a> by <a href="https://hypercho.com" target="_blank" rel="noopener">Hypercho</a></p>