Pick a color.
Know everything about it.

This common discrepancy is caused by Color Space mismatches. Most web browsers interpret standard CSS hex codes within the sRGB color space. However, modern macOS devices, iPhones, and design applications (like Figma or Photoshop) often default to Display P3 or Adobe RGB, which have a significantly wider color gamut. As a result, vibrant greens, oranges, and pinks designed in P3 can appear desaturated or dull when exported to standard sRGB hex codes. To fix this, configure your design tool's color profile to sRGB before exporting, or use modern CSS Color Level 4 syntax like color(display-p3 0.9 0.2 0.5).

Under the Web Content Accessibility Guidelines (WCAG 2.1) and the Americans with Disabilities Act (ADA), text must achieve a minimum contrast ratio against its background: 4.5:1 for normal body text (under 18pt or 14pt bold) and 3.0:1 for large text and interactive user interface components (like input borders and button outlines). You can instantly test any foreground and background color combination using our free WCAG Contrast Checker.

OKLCH is a perceptually uniform color space introduced in CSS Color Module Level 4. Traditional models like HSL suffer from perceptual non-uniformity: for instance, pure yellow (hsl(60, 100%, 50%)) appears much brighter to the human eye than pure blue (hsl(240, 100%, 50%)) despite having the identical '50% Lightness' value. OKLCH solves this by ensuring that changes in lightness (L) reflect true perceived human brightness, preventing muddy grayish midpoints in gradients and ensuring consistent contrast across accessible UI design systems.

Yes, 100% free. All color palettes, conversion codes, CSS gradients, Tailwind scales, and extracted image palettes generated on ColorKit are released under the public domain (CC0). You may freely use them in commercial client websites, SaaS applications, mobile games, branding guidelines, and open-source repositories without royalty fees or required attribution.

No. ColorKit is engineered with a strict 100% Client-Side Privacy architecture. All calculations, image rendering, loupe magnification, and palette quantization execute locally within your browser's memory using HTML5 Canvas and native JavaScript APIs. Your personal photographs, unreleased UI mockups, and proprietary brand designs are never uploaded, stored, or transmitted across any external network.