Flagship color picker with EyeDropper, HSV/RGB/HSL controls, harmonies, tints & shades, WCAG contrast, favorites, and copy-ready CSS.
AA normal text: Pass
AA large: Pass · AAA normal: Fail
AA normal text: Fail
AA large: Pass · AAA normal: Fail
Normal text AA needs 4.5:1; large text AA needs 3:1. Results apply to the displayed pairs.
:root {
--color-brand: #5368ce;
--color-brand-rgb: 83 104 206;
}
.brand-button {
background: var(--color-brand);
color: #ffffff;
}Start with a relationship on the color wheel.
Your color explorations will appear here.
How to use this tool
Use this picker when you already have a hue in mind — a brand rose, a screenshot, or a CSS token — and need every format plus a contrast sanity check before you paste it into code.
A picker that only dumps HEX still leaves you converting later. This one keeps harmonies, tints, and WCAG next to the value so you do not ship a pretty color that fails on buttons.
Read next: How color psychology shapes conversion rates · Color formats and contrast lessons
A LITTLE MORE CLARITY
Need a reference? Browse the HEX and RGB color code chart. Looking for more? Browse Our Tools.