Color Picker
Explore any color — variations, harmony and accessibility.
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.
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…
Embed this tool
Free to use on your own site. It stays fast and private for your visitors.
<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>Related tools
Doing this by hand every week?Hand it to an AI employee.
A free tool handles one job at a time. If your team repeats a workflow like this every day, we'll design, build and run an AI employee that owns it.
Book a strategy call