Nearest named color · #00335F
#00335F
Nearest named color: Neptune’s Dream
#00335F (rgb(0 51 95), hsl(208 100% 19%), oklch(0.318 0.092 251)) is closest to the named color Neptune’s Dream. See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
#00335F
oklch(0.318 0.092 251)
Color conversions
- HEX
- #00335f
- RGB
- rgb(0 51 95)
- HSL
- hsl(208 100% 19%)
- HWB
- hwb(208 0% 63%)
- OKLCH
- oklch(0.318 0.092 251)
- OKLab
- oklab(0.318 -0.03 -0.087)
- CIE Lab
- lab(20.31 -0.8 -31.13)
- LCH
- lch(20.31 31.14 268.5)
- CMYK
- cmyk(100% 46% 0% 63%)
Tints · Shades · Tones
Tints
- 1D466F
- 36597E
- 4D6C8E
- 65809E
- 7D94AE
- 96A9BE
- B0BECE
- CAD3DE
- E4E9EF
Shades
- 002B52
- 002344
- 001C38
- 00142C
- 000D20
- 000715
- 00030A
- 000103
- 000000
Tones
- 123B63
- 204367
- 2D4A6A
- 39526E
- 445A71
- 506174
- 5C6977
- 68717A
- 74787D
Color harmonies
Complementary +180°
- 00335F
Neptune’s Dream
- 482B00
≈ Stirland Mud
Analogous -30° +30°
- 00335F
Neptune’s Dream
- 003947
≈ Natural Indigo
- 2B2A5F
≈ Deep Breath
Triadic +120° +240°
- 00335F
Neptune’s Dream
- 571926
≈ Drops of God
- 223B00
≈ Melancholia
Split-complementary +150° +210°
- 00335F
Neptune’s Dream
- 571D04
≈ Peaty Brown
- 3A3300
≈ Hidden Passage
Tetradic +90° +180° +270°
- 00335F
Neptune’s Dream
- 501B40
≈ Violet Carmine
- 482B00
≈ Stirland Mud
- 003D26
≈ Angel Green
Contrast & accessibility
Ag
AAAOn white
WCAG 12.81:1 · APCA Lc 98
Ag
FailOn black
WCAG 1.63:1 · APCA Lc 0
Best text color: #FFFFFF
WCAG 12.81:1 (AAA) · APCA Lc 98
Contrast pairs
Code snippets
CSS
:root {
--neptune-s-dream: #00335f;
--neptune-s-dream-rgb: 0 51 95;
--neptune-s-dream-oklch: oklch(0.318 0.092 251);
}
.element {
color: var(--neptune-s-dream);
background-color: hsl(208 100% 19%);
border-color: oklch(0.318 0.092 251);
}Tailwind CSS v4
@theme {
--color-neptune-s-dream: #00335f;
--color-neptune-s-dream-50: #e3f7ff;
--color-neptune-s-dream-100: #d3eaff;
--color-neptune-s-dream-200: #b9d7fc;
--color-neptune-s-dream-300: #96bbe6;
--color-neptune-s-dream-400: #75a2d4;
--color-neptune-s-dream-500: #558ac1;
--color-neptune-s-dream-600: #4975a3;
--color-neptune-s-dream-700: #3a5d83;
--color-neptune-s-dream-800: #284561;
--color-neptune-s-dream-900: #1b3044;
--color-neptune-s-dream-950: #0b1c2c;
}SCSS
$neptune-s-dream: #00335f;
$neptune-s-dream-rgb: 0, 51, 95;
$neptune-s-dream-light: mix(#fff, $neptune-s-dream, 20%);
$neptune-s-dream-dark: mix(#000, $neptune-s-dream, 20%);
.element {
color: $neptune-s-dream;
box-shadow: 0 0 0 2px rgba($neptune-s-dream, 0.35);
}