Cadet Blue Color Code
Explore Cadet Blue (#5F9EA0) with complete color code values, format conversions and color variations. Find the best color combinations and contrast. The color is part of the blue family.
5F9EA0
Formats
The same color in different formats:
Foreground preview
WCAG contrast checker and foreground picker
Best auto foreground
Best contrast with dark
#0f172a
Auto-selects the strongest contrast against the current background.
Readable text preview
The quick brown fox jumps over the lazy dog.
Contrast ratio
5.85
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.
Color Conversion
Same color in multiple code formats.
Export formats
Ready-to-copy snippets for developers, apps, frameworks, and design systems.
#5F9EA0
| 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
#8cb9bb
Shade
Darkened version
#48787a
Tone
Muted version
#669799
Monochrome
Single-hue family
#3d6566
Related content
auto-linkedTags
Styles
Use cases
Palettes
Similar colors
Meaning / Aesthetic / Framework
content readyMeaning
Aesthetic
Framework