Named color · #10246A
Abyssal Depths
Abyssal Depths is #10246A: rgb(16 36 106), hsl(227 74% 24%), oklch(0.297 0.125 266.2). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Blue mean? → · Abyssal Depths color name →
#10246A
oklch(0.297 0.125 266.2)
Color conversions
- HEX
- #10246a
- RGB
- rgb(16 36 106)
- HSL
- hsl(227 74% 24%)
- HWB
- hwb(227 6% 58%)
- OKLCH
- oklch(0.297 0.125 266.2)
- OKLab
- oklab(0.297 -0.008 -0.124)
- CIE Lab
- lab(16.77 15.45 -44.01)
- LCH
- lch(16.77 46.65 289.3)
- CMYK
- cmyk(85% 66% 0% 58%)
Tints · Shades · Tones
Tints
- 233A79
- 384F89
- 4E6498
- 6579A7
- 7D8EB6
- 96A4C4
- AFBAD3
- C9D1E2
- E4E8F0
Shades
- 0C1E5B
- 09184D
- 06123F
- 040C31
- 020724
- 010418
- 00020D
- 000004
- 000000
Tones
- 1A2F6D
- 243870
- 2E4273
- 394B75
- 455478
- 505D7A
- 5C667C
- 686E7D
- 74777F
Color harmonies
Complementary +180°
- 10246A
Abyssal Depths
- 3A2A00
≈ Secret Passage
Analogous -30° +30°
- 10246A
Abyssal Depths
- 003149
≈ Cosmos Blue
- 351762
≈ Candied Blueberry
Triadic +120° +240°
- 10246A
Abyssal Depths
- 5B0006
≈ Spikey Red
- 00380D
≈ Gameboy Contrast
Split-complementary +150° +210°
- 10246A
Abyssal Depths
- 472100
≈ Blackened Brown
- 2B3100
≈ Blind Forest
Tetradic +90° +180° +270°
- 10246A
Abyssal Depths
- 57002F
≈ Mulberry Wood
- 3A2A00
≈ Secret Passage
- 00362C
≈ Coach Green
Contrast & accessibility
Ag
AAAOn white
WCAG 14.16:1 · APCA Lc 100
Ag
FailOn black
WCAG 1.48:1 · APCA Lc 0
Best text color: #FFFFFF
WCAG 14.16:1 (AAA) · APCA Lc 100
Contrast pairs
Code snippets
CSS
:root {
--abyssal-depths: #10246a;
--abyssal-depths-rgb: 16 36 106;
--abyssal-depths-oklch: oklch(0.297 0.125 266.2);
}
.element {
color: var(--abyssal-depths);
background-color: hsl(227 74% 24%);
border-color: oklch(0.297 0.125 266.2);
}Tailwind CSS v4
@theme {
--color-abyssal-depths: #10246a;
--color-abyssal-depths-50: #e6f5ff;
--color-abyssal-depths-100: #d6e7ff;
--color-abyssal-depths-200: #bed3ff;
--color-abyssal-depths-300: #9cb5f8;
--color-abyssal-depths-400: #7c9ce8;
--color-abyssal-depths-500: #5f82d8;
--color-abyssal-depths-600: #516eb7;
--color-abyssal-depths-700: #415893;
--color-abyssal-depths-800: #2c416d;
--color-abyssal-depths-900: #1e2d4d;
--color-abyssal-depths-950: #0e1933;
}SCSS
$abyssal-depths: #10246a;
$abyssal-depths-rgb: 16, 36, 106;
$abyssal-depths-light: mix(#fff, $abyssal-depths, 20%);
$abyssal-depths-dark: mix(#000, $abyssal-depths, 20%);
.element {
color: $abyssal-depths;
box-shadow: 0 0 0 2px rgba($abyssal-depths, 0.35);
}