Color Picker

Searching for that perfect color? Use our color picker to browse millions of colors and harmonies, and export Hex, RGB, HSL and OKLCH codes.

Hex #177245
RGB 23, 114, 69
HSL 150, 66%, 27%
OKLCH 0.27, 0.14, 150
CMYK 0, 0, 0, 0

Choose Color

Color Preview

#4C9E23

Color Shades

Automated Palette

Nearby Tailwind Color Shade

Open Tailwind Nearest →

Color Harmonies

Color Variations

Tailwind

Shades

Tints

Tones

Magic Palette

Contrast Checker

White background

4.09
contrast ratio on a white background
Element AA AAA
Small text
Large text
UI element

Black background

5.12
contrast ratio on a black background
Element AA AAA
Small text
Large text
UI element

Learn Colors: A Practical Guide

Master the fundamentals of color so you can design with confidence. This guide updates live as you change the color above, showing examples with your current selection.

Shades, Tints, and Tones

Shades add black to your color, making it darker. Tints add white, making it lighter. Tones add gray, softening saturation. Use shades for depth and shadows, tints for backgrounds and hover states, and tones for subtle UI elements.

Magic Palette (50→950)

Our Magic Palette organizes a color into a semantic scale that maps naturally to UI uses: bg (50), surface (100), subtle (200), border (300), muted (400), base (500), text (600), hover (700), active (800), heading (900), dark (950).

Color Code Formats

Different formats suit different workflows. Switch formats at the top; the entire page updates. Here’s when to use each:

  • Hex: Compact, universal on the web. Great for tokens and CSS variables.
  • RGB: Channel-based control; useful when animating or mixing channels.
  • HSL: Human-friendly; ideal for generating shades/tints by adjusting lightness and saturation.
  • OKLCH: Perceptually uniform; better for algorithmic palettes and color-difference work.
  • CMYK: Print workflows. Added below for quick conversion from your selected color.
CMYK: 0, 0, 0, 0

Contrast Checker

Accessibility matters. Our checker computes the WCAG contrast ratio to help you ensure readable text and accessible UI. Aim for 4.5:1 for normal text and 3:1 for large text; 7:1 is excellent for high contrast interfaces.