HSL Color Picker

Select perfect HEX color codes for your designs. Convert between color formats and create beautiful color schemes.

Hue
198°
Saturation
57%
Lightness
40%
HSL

Recent Colors

Ocean Blue
HEX
#2c7da0
RGB
rgb(44, 125, 160)
HSL
hsl(198, 57%, 40%)
CMYK
cmyk(73%, 22%, 0%, 37%)

Color Contrast Checker

Check the contrast ratio between your selected color and white/black text to ensure accessibility compliance:

White Text
Black Text
Contrast Ratio: 4.8:1 (Passes AA level for large text)
Complementary
Primary
hsl(198,57%,40%)
Complement
hsl(18,57%,40%)
Analogous
Analogous
hsl(168,57%,40%)
Primary
hsl(198,57%,40%)
Analogous
hsl(228,57%,40%)
Triadic
Triadic
hsl(78,57%,40%)
Primary
hsl(198,57%,40%)
Triadic
hsl(318,57%,40%)
Monochromatic
Dark
hsl(198,57%,20%)
Base
hsl(198,57%,40%)
Light
hsl(198,57%,60%)

Understanding HSL Color Model

The HSL (Hue, Saturation, Lightness) color model is designed to be more intuitive than RGB:

Hue

Hue represents the color itself and is measured in degrees (0-360) around the color wheel:

  • 0° = Red
  • 60° = Yellow
  • 120° = Green
  • 180° = Cyan
  • 240° = Blue
  • 300° = Magenta

Hue is the most intuitive aspect of color selection for designers.

Saturation

Saturation determines the intensity or purity of a color:

0%: Completely desaturated (grayscale)

50%: Moderately saturated

100%: Fully saturated (vibrant color)

Adjusting saturation allows you to create muted or vibrant color schemes.

Lightness

Lightness controls how light or dark a color appears:

0%: Pure black

50%: Normal color intensity

100%: Pure white

Lightness adjustments are particularly useful for creating accessible color palettes with sufficient contrast.

HSL Advantages

Why designers prefer HSL over other color models:

Intuitive: Matches how humans perceive color

Predictable: Changing one value doesn't affect others

Harmony: Easier to create harmonious color schemes

Accessibility: Simplifies creating accessible color palettes

Consistency: Maintains color relationships when adjusting lightness

HSL Color Palettes

Explore professionally curated color palettes using HSL color model:

hsl(198,57%,40%)
hsl(28,57%,40%)
hsl(138,57%,40%)
hsl(78,57%,40%)
hsl(318,57%,40%)
Triadic Harmony
Vibrant color scheme with equal hue spacing
hsl(198,57%,20%)
hsl(198,57%,30%)
hsl(198,57%,40%)
hsl(198,57%,60%)
hsl(198,57%,80%)
Monochromatic
Single hue with varying lightness levels
hsl(198,57%,40%)
hsl(168,57%,40%)
hsl(138,57%,40%)
hsl(108,57%,40%)
hsl(78,57%,40%)
Analogous Gradient
Smooth transition through adjacent hues

Color Psychology

  • Blue hues (200-240°) are associated with trust and professionalism
  • Red hues (0-15°) increase heart rate and create urgency
  • Green hues (120-140°) promote relaxation and environmental awareness
  • Yellow hues (50-70°) grab attention but can cause eye strain
  • Purple hues (270-300°) evoke creativity and luxury

Accessibility Tips

When using HSL to create accessible designs:

Contrast: Ensure text has sufficient contrast against backgrounds. Aim for at least 4.5:1 ratio.

Color Blindness: Avoid relying solely on hue differences. Use saturation and lightness to create distinguishable elements.

Lightness: Adjust lightness values to create accessible color variations while maintaining hue relationships.