Shawon Web Shawon Web
USD
Back to Tools

HTML Color Picker

Pick, convert, and explore colors. Generate palettes, gradients, shades, and check accessibility compliance.

Color Selection

Or use native color picker
Hue204°
Saturation70%
Lightness53%

Color Values

Shades & Tints

Color Harmony

Gradient Generator

Accessibility Checker

Sample Text

This is how your color looks on this background

8.59
Contrast Ratio
Pass
WCAG AA (4.5:1)
Pass
WCAG AAA (7:1)
Pass
Large Text (3:1)

Color Blindness Simulation

Normal Vision

Protanopia

Red-blind

Deuteranopia

Green-blind

Tritanopia

Blue-blind

Saved Colors

No saved colors yet. Click "Save Current" to add colors to your palette.

How to Use the HTML Color Picker

  1. 1

    Enter or Pick a Color

    Type a HEX, RGB, or HSL value, use the native picker, or adjust the sliders.

  2. 2

    View Conversions

    See your color in HEX, RGB, HSL, CMYK, and CSS variable formats.

  3. 3

    Explore Variations

    Check shades/tints, harmonies, gradients, and accessibility scores.

  4. 4

    Save & Export

    Save colors to your palette and copy any value with one click.

Understanding Color Formats

HEX

Six-digit hexadecimal: #3498db. Most common in web development.

RGB

Red, Green, Blue (0-255): rgb(52, 152, 219). Good for programmatic manipulation.

HSL

Hue, Saturation, Lightness: hsl(204, 70%, 53%). Most intuitive for adjustments.

CMYK

Cyan, Magenta, Yellow, Key (Black). Standard for print design and publishing.

Frequently Asked Questions

What is WCAG compliance?
WCAG (Web Content Accessibility Guidelines) sets contrast standards. AA requires 4.5:1 for normal text, AAA requires 7:1 for enhanced accessibility.
What is a color harmony?
Color harmonies are combinations based on the color wheel. Complementary uses opposites, analogous uses neighbors, triadic uses evenly spaced colors.
Why check color blindness?
About 8% of men have some form of color blindness. Checking simulations helps ensure your designs are accessible to everyone.