HSL / Brown
Open color page
Brown in HSL
Brown in HSL: hsl(0, 59.42%, 40.59%). Compare HEX, RGB, HSL, CMYK, LAB, LCH and OKLCH.
Full breakdown
The same color in multiple formats.
Formats
The same color in different formats:
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.
Contrast ratio
7.08
Excellent accessibility
| Element | AA | AAA |
|---|---|---|
| Small text | Pass | Pass |
| 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.
Export formats
Ready-to-copy snippets for developers, apps, frameworks, and design systems.
#A52A2A
| Swatch | Format | Snippet |
|---|---|---|
|
CSS variable
|
||
|
JSON token
|
||
|
Tailwind config
|
||
|
SCSS variable
|
CSS variable
Tokens
JSON token
Tokens
Tailwind config
Tokens
SCSS variable
Tokens
| Swatch | Format | Snippet |
|---|---|---|
|
JavaScript
|
||
|
TypeScript
|
||
|
Inline style
|
||
|
CSS class
|
JavaScript
Frontend
TypeScript
Frontend
Inline style
Frontend
CSS class
Frontend
| 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
| Swatch | Format | Snippet |
|---|---|---|
|
SVG fill
|
||
|
SVG stroke
|
SVG fill
Graphics
SVG stroke
Graphics
Color Variations
tint / shadeTint
Lightened version
#be6666
Shade
Darkened version
#7d2020
Tone
Muted version
#9d3d3d
Monochrome
Single-hue family
#5c1717
Related content
auto-linkedTags
Styles
Use cases
Palettes
Similar colors
Meaning / Aesthetic / Framework
content readyMeaning
Aesthetic
Framework