HSL / Indigo
Open color page
Indigo in HSL
Indigo in HSL: hsl(239, 83.53%, 66.67%). 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
4.47
Passes only for large text
| Element | AA | AAA |
|---|---|---|
| Small text | Fail | 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.
Export formats
Ready-to-copy snippets for developers, apps, frameworks, and design systems.
#6366F1
| 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
#8f91f5
Shade
Darkened version
#4b4eb7
Tone
Muted version
#696cd8
Monochrome
Single-hue family
#1418e4
Related content
auto-linkedTags
Styles
Use cases
Palettes
Similar colors
Meaning / Aesthetic / Framework
content readyMeaning
Aesthetic
Framework