Color Picker - Pick Colors & Convert HEX, RGB, HSL Instantly

Visual color picker with format conversion, contrast checker, and harmony generator

Color Picker

#ff0000
rgb(255, 0, 0)
HEX
#ff0000
RGB
rgb(255, 0, 0)
HSL
hsl(0, 100%, 50%)
HSB
hsb(0, 100%, 100%)
RGBA
rgba(255, 0, 0, 1)
HSLA
hsla(0, 100%, 50%, 1)
Hue
0
Alpha
1.00
Color Values
HEX
RGB
HSL
HSB
WCAG Contrast Checker
Sample Text - Aa Bb Cc
The quick brown fox jumps over the lazy dog. 14px body text sample.
-- AA -- AAA --
Sample Text - Aa Bb Cc
The quick brown fox jumps over the lazy dog. 14px body text sample.
-- AA -- AAA --
Color Harmonies
Complementary
Analogous
Triadic
Split-Complementary
Tetradic
Saved Colors
No saved colors yet. Click "Save Current" to bookmark a color.
Recent Colors

How to Use This Color Picker

  1. Pick visually: Click and drag on the color area to select saturation and brightness. Use the hue bar to change the base color.
  2. Enter values: Type HEX codes (e.g., #ff5500), RGB values, or HSL values directly in the input fields. All formats sync in real time.
  3. Pick from screen: Use the "Pick Color from Screen" button (if your browser supports the EyeDropper API) to sample any color on your screen.
  4. Check contrast: The WCAG contrast checker shows whether your color meets accessibility standards (AA/AAA) against white or black backgrounds.
  5. Explore harmonies: Click any swatch in the harmony section to apply that color. Complementary, analogous, triadic, split-complementary, and tetradic palettes are generated automatically.
  6. Save swatches: Click "Save Current" to bookmark colors. Saved colors persist in your browser. Click any info card or label to copy the value.

Color Format Reference

  • HEX: 6-digit hexadecimal (#RRGGBB) or 8-digit with alpha (#RRGGBBAA). The most common format in web design and CSS.
  • RGB: Red, Green, Blue values from 0 to 255. Used in CSS as rgb(r, g, b) or rgba(r, g, b, a).
  • HSL: Hue (0-360 degrees), Saturation (0-100%), Lightness (0-100%). Intuitive for making color adjustments -- increase lightness to brighten, decrease saturation to mute.
  • HSB/HSV: Hue (0-360 degrees), Saturation (0-100%), Brightness/Value (0-100%). Common in design software like Photoshop and Figma.

Color Harmonies Explained

  • Complementary: Colors opposite on the color wheel (180 degrees apart). Creates strong contrast and visual interest.
  • Analogous: Colors adjacent on the wheel (30 degrees apart). Creates harmonious, cohesive palettes.
  • Triadic: Three colors equally spaced (120 degrees apart). Offers vibrant, balanced combinations.
  • Split-Complementary: Uses two colors adjacent to the complement (150 and 210 degrees). Less tension than pure complementary, but still vibrant.
  • Tetradic (Rectangle): Four colors forming a rectangle on the wheel (0, 90, 180, 270). Rich palette with many possibilities -- best when one color dominates.

WCAG Contrast Guidelines

  • Contrast Ratio: Measures the luminance difference between foreground and background. Ranges from 1:1 (no contrast) to 21:1 (maximum, black on white).
  • WCAG AA (Normal Text): Requires a ratio of at least 4.5:1. This is the minimum standard for body text accessibility.
  • WCAG AA (Large Text): Requires at least 3:1. Large text is 18pt+ (24px) or 14pt+ bold (18.66px bold).
  • WCAG AAA (Normal Text): Requires at least 7:1. This is the enhanced standard for maximum readability.
  • WCAG AAA (Large Text): Requires at least 4.5:1 for large text under the enhanced standard.

Privacy & Limitations

  • All calculations run entirely in your browser -- nothing is sent to any server.
  • Results are computed locally and should be verified for critical applications.

Related Tools

Related Tools

View all tools

Big-O Notation Visualizer

Interactive plot of O(1) through O(n!) complexity curves with operation count comparison

JSON Formatter

Format and beautify JSON with proper indentation

JSON Validator

Validate JSON syntax and show errors

CSV to JSON Converter

Convert CSV data to JSON format with auto-detection

JSON to CSV Converter

Convert JSON arrays to CSV format with nested object handling

JWT Decoder

Decode JWT tokens and display header and payload

Color Picker FAQ

What color formats does this picker support?

This picker supports HEX (6 or 8 digit), RGB (0-255 per channel), HSL (hue/saturation/lightness), and HSB/HSV (hue/saturation/brightness). All formats sync in real time.

How does the WCAG contrast checker work?

It calculates the contrast ratio between your chosen color and a background. WCAG AA requires 4.5:1 for normal text and 3:1 for large text. WCAG AAA requires 7:1 for normal text and 4.5:1 for large text.

What are color harmonies?

Color harmonies are combinations of colors based on their position on the color wheel. Complementary colors are opposite (180 degrees apart), analogous are adjacent (30 degrees), triadic are equally spaced (120 degrees), and split-complementary uses two colors adjacent to the complement.

Request a New Tool
Improve This Tool