Color Tools Suite
All-in-one color toolkit: picker, harmony generator, contrast checker, gradient builder, tints & shades, color blindness simulator, and palette manager.
dodgerblue
#0d80f2
Mastering Color: A Developer & Designer's Guide
The Art of Palettes
A good color palette is foundational to design. Aim for a primary color for branding, a secondary for accents, and neutral colors for text and backgrounds. Use the Palette tab to save, organize, and export your colors in CSS, Tailwind, SCSS, or JSON.
Color Harmony & Theory
The Harmony tab generates complementary, analogous, triadic, split-complementary, tetradic, and monochromatic color schemes. A built-in color wheel visualizes where each harmony color falls, helping you understand color relationships at a glance.
HEX, RGB, HSL, HSV & CMYK
The Picker tab converts between all major color formats in real time. Edit HEX, RGB, HSL values directly, view HSV and CMYK read-outs, and use the EyeDropper API to sample colors from anywhere on your screen.
Accessibility & Contrast
The Contrast tab checks your foreground/background color pair against WCAG AA and AAA standards for both normal and large text. The Blindness tab simulates 8 types of color vision deficiency so you can design inclusively.
Gradients & Shades
Build linear, radial, or conic CSS gradients with up to 10 color stops and copy the CSS output. Generate precise tints and shades of any base color for design systems that need consistent light/dark variations.