Named color · #658FAA
Treasure Map Waters
Treasure Map Waters is #658FAA: rgb(101 143 170), hsl(203 29% 53%), oklch(0.63 0.062 237.2). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Blue mean? → · Treasure Map Waters color name →
#658FAA
oklch(0.63 0.062 237.2)
Color conversions
- HEX
- #658faa
- RGB
- rgb(101 143 170)
- HSL
- hsl(203 29% 53%)
- HWB
- hwb(203 40% 33%)
- OKLCH
- oklch(0.63 0.062 237.2)
- OKLab
- oklab(0.63 -0.033 -0.052)
- CIE Lab
- lab(57.1 -9.53 -19.14)
- LCH
- lch(57.1 21.38 243.5)
- CMYK
- cmyk(41% 16% 0% 33%)
Tints · Shades · Tones
Tints
- 749AB2
- 83A5BB
- 92B0C3
- A1BBCC
- B1C6D4
- C0D1DD
- D0DDE5
- DFE8EE
- EFF3F6
Shades
- 577C93
- 49697D
- 3C5768
- 2F4553
- 22343F
- 17242D
- 0C151B
- 03070B
- 000101
Tones
- 688EA6
- 6B8CA2
- 6E8B9D
- 718999
- 748895
- 768691
- 79858D
- 7B8388
- 7E8284
Color harmonies
Complementary +180°
- 658FAA
Treasure Map Waters
- A68064
≈ Medium Wood
Analogous -30° +30°
- 658FAA
Treasure Map Waters
- 5A949C
≈ Clear Brook
- 7888AF
≈ Ship Cove
Triadic +120° +240°
- 658FAA
Treasure Map Waters
- A87A89
≈ Silken Raspberry
- 868E63
≈ Green Coconut
Split-complementary +150° +210°
- 658FAA
Treasure Map Waters
- AB7B75
≈ Cranberry Foule
- 99875E
≈ Ridgecrest
Tetradic +90° +180° +270°
- 658FAA
Treasure Map Waters
- 9E7C9D
≈ Divine
- A68064
≈ Medium Wood
- 709474
≈ Tabbouleh
Contrast & accessibility
Ag
FailOn white
WCAG 3.46:1 · APCA Lc 62
Ag
AAOn black
WCAG 6.06:1 · APCA Lc 40
Best text color: #000000
WCAG 6.06:1 (AA) · APCA Lc 40
Contrast pairs
Code snippets
CSS
:root {
--treasure-map-waters: #658faa;
--treasure-map-waters-rgb: 101 143 170;
--treasure-map-waters-oklch: oklch(0.63 0.062 237.2);
}
.element {
color: var(--treasure-map-waters);
background-color: hsl(203 29% 53%);
border-color: oklch(0.63 0.062 237.2);
}Tailwind CSS v4
@theme {
--color-treasure-map-waters: #658faa;
--color-treasure-map-waters-50: #e6f8ff;
--color-treasure-map-waters-100: #d6ebfb;
--color-treasure-map-waters-200: #bdd9ec;
--color-treasure-map-waters-300: #9bbcd4;
--color-treasure-map-waters-400: #7ca4bf;
--color-treasure-map-waters-500: #5e8daa;
--color-treasure-map-waters-600: #507790;
--color-treasure-map-waters-700: #405f73;
--color-treasure-map-waters-800: #2d4655;
--color-treasure-map-waters-900: #1e303b;
--color-treasure-map-waters-950: #0e1d25;
}SCSS
$treasure-map-waters: #658faa;
$treasure-map-waters-rgb: 101, 143, 170;
$treasure-map-waters-light: mix(#fff, $treasure-map-waters, 20%);
$treasure-map-waters-dark: mix(#000, $treasure-map-waters, 20%);
.element {
color: $treasure-map-waters;
box-shadow: 0 0 0 2px rgba($treasure-map-waters, 0.35);
}