HSL / Dark Blue
Open color page
Dark Blue in HSL
Dark Blue in HSL: hsl(240, 100%, 27.25%). 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
15.30
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.
#00008B
| 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
#4747ab
Shade
Darkened version
#00006a
Tone
Muted version
#1c1c89
Monochrome
Single-hue family
#00002f
Related content
auto-linkedTags
Styles
Use cases
Palettes
Similar colors
Meaning / Aesthetic / Framework
content readyMeaning
Aesthetic
Framework