HSL format page

HSL Color Codes

Explore HSL values with a live color picker, format-aware previews, conversion rows, and contrast guidance.

HEX RGB RGBA HSLA CMYK LAB LCH OKLCH

Custom picker

Fine-tune your color

Drag the field, adjust hue and alpha, or paste any supported format.

Hue 110°

Alpha 100%

Tip: you can paste formats like #3f7f2f, rgb(63, 127, 47), hsl(110, 45%, 35%), or oklch(0.7, 0.1, 220).

Current HSL value

Default sample

Value

Canonical page

hsl(108, 45.98%, 34.12%)

Foreground preview

WCAG contrast checker and foreground picker

Best auto foreground

Best contrast with white


                        #ffffff

Auto-selects the strongest contrast against the current background.

Readable text preview

The quick brown fox jumps over the lazy dog.

Button preview

Contrast ratio

4.90

Passes AA for normal text

Element	AA	AAA
Small text	Pass	Fail
Large text	Pass	—
UI elements / graphics	Pass	N/A

AA for normal text is typically 4.5:1, AA for large text 3:1, AAA for normal text 7:1, and non-text UI elements typically 3:1.

About HSL

HSL

Hue, saturation, and lightness.

HSL is convenient for visual adjustments because you can change lightness or saturation without manually rebalancing the color channels.

Best for editing and generating color variations.

Convert to other formats

Jump directly to the same color in another notation.

HEX RGB RGBA HSLA CMYK LAB LCH OKLCH

Color Conversion

Same color in multiple code formats.

Swatch	Code	Value	HTML/CSS
	HEX		#3f7f2f
	RGB		rgb(63 127 47)
	RGBA		rgba(63 127 47 / 1)
	HSL		hsl(108 45% 34%)
	HSLA		hsla(108 45% 34% / 1)
	CMYK		cmyk(50.39 0 62.99 50.2)
	LAB		lab(47.5466 -36.6753 36.4145)
	LCH		lch(47.5466 51.6826 135.2)
	OKLCH		oklch(0.5355 0.1318 139.77)

HEX

HTML/CSS

#3f7f2f

RGB

HTML/CSS

rgb(63 127 47)

RGBA

HTML/CSS

rgba(63 127 47 / 1)

HSL

HTML/CSS

hsl(108 45% 34%)

HSLA

HTML/CSS

hsla(108 45% 34% / 1)

CMYK

HTML/CSS

cmyk(50.39 0 62.99 50.2)

LAB

HTML/CSS

lab(47.5466 -36.6753 36.4145)

LCH

HTML/CSS

lch(47.5466 51.6826 135.2)

OKLCH

HTML/CSS

oklch(0.5355 0.1318 139.77)

Export formats

Ready-to-copy snippets for developers, apps, frameworks, and design systems.

#3F7F2F

Design tokens

Tokens

Swatch	Format	Snippet
	CSS variable
	JSON token
	Tailwind config
	SCSS variable

CSS variable

Tokens

JSON token

Tokens

Tailwind config

Tokens

SCSS variable

Tokens

Web / frontend

Frontend

Swatch	Format	Snippet
	JavaScript
	TypeScript
	Inline style
	CSS class

JavaScript

Frontend

TypeScript

Frontend

Inline style

Frontend

CSS class

Frontend

Mobile / app

Mobile

Swatch	Format	Snippet
	Android XML
	SwiftUI
	Swift UIColor
	Kotlin
	Flutter
	React Native

Android XML

Mobile

SwiftUI

Mobile

Swift UIColor

Mobile

Kotlin

Mobile

Flutter

Mobile

React Native

Mobile

SVG / graphics

Graphics

Swatch	Format	Snippet
	SVG fill
	SVG stroke

SVG fill

Graphics

SVG stroke

Graphics

Color Variations

tint / shade

Tint

Lightened version

#75a369

Shade

Darkened version

#306124

Tone

Muted version

#4d7f41

Monochrome

Single-hue family

#1e3c16

Supported format references

Compare the supported formats and move between them without losing the same color context.