En yakın adlandırılmış renk · #003164
#003164
En yakın adlandırılmış renk: Neptune’s Dream
#003164 (rgb(0 49 100), hsl(211 100% 20%), oklch(0.317 0.102 254.4)) en çok Neptune’s Dream adlı renge yakındır. Açık tonlar, koyu tonlar, uyumlar, WCAG ve APCA kontrastı ile CSS, Tailwind v4 ve SCSS kodunu görün.
#003164
oklch(0.317 0.102 254.4)
Renk dönüşümleri
- HEX
- #003164
- RGB
- rgb(0 49 100)
- HSL
- hsl(211 100% 20%)
- HWB
- hwb(211 0% 61%)
- OKLCH
- oklch(0.317 0.102 254.4)
- OKLab
- oklab(0.317 -0.027 -0.099)
- CIE Lab
- lab(19.94 2.45 -34.98)
- LCH
- lch(19.94 35.07 274)
- CMYK
- cmyk(100% 51% 0% 61%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- 1D4473
- 355883
- 4C6B92
- 647FA2
- 7D94B1
- 96A9C1
- AFBED0
- C9D3E0
- E4E9EF
Koyu tonlar
- 002956
- 002248
- 001A3B
- 00132E
- 000C22
- 000616
- 00030B
- 000103
- 000000
Gri tonlar
- 113967
- 1F416B
- 2C496E
- 385171
- 445974
- 506177
- 5C6979
- 68707C
- 74787E
Renk uyumları
Tamamlayıcı +180°
- 003164
Neptune’s Dream
- 462C00
≈ Stirland Mud
Analog -30° +30°
- 003164
Neptune’s Dream
- 003848
≈ Crowberry Blue
- 2E2763
≈ Paris M
Üçlü +120° +240°
- 003164
Neptune’s Dream
- 5B1421
≈ Spinel Red
- 1C3B00
≈ Melancholia
Bölünmüş tamamlayıcı +150° +210°
- 003164
Neptune’s Dream
- 561E00
≈ Conker Brown
- 383300
≈ Wasabi Nori
Dörtlü +90° +180° +270°
- 003164
Neptune’s Dream
- 53163E
≈ Violet Carmine
- 462C00
≈ Stirland Mud
- 003C29
≈ Deep Fir
Kontrast ve erişilebilirlik
Ag
AAABeyaz üzerinde
WCAG 12.93:1 · APCA Lc 99
Ag
FailSiyah üzerinde
WCAG 1.62:1 · APCA Lc 0
En iyi metin rengi: #FFFFFF
WCAG 12.93:1 (AAA) · APCA Lc 99
Contrast pairs
Kod parçacıkları
CSS
:root {
--neptune-s-dream: #003164;
--neptune-s-dream-rgb: 0 49 100;
--neptune-s-dream-oklch: oklch(0.317 0.102 254.4);
}
.element {
color: var(--neptune-s-dream);
background-color: hsl(211 100% 20%);
border-color: oklch(0.317 0.102 254.4);
}Tailwind CSS v4
@theme {
--color-neptune-s-dream: #003164;
--color-neptune-s-dream-50: #e3f7ff;
--color-neptune-s-dream-100: #d2eaff;
--color-neptune-s-dream-200: #b8d7ff;
--color-neptune-s-dream-300: #96baec;
--color-neptune-s-dream-400: #74a1da;
--color-neptune-s-dream-500: #5488c8;
--color-neptune-s-dream-600: #4874a9;
--color-neptune-s-dream-700: #395c88;
--color-neptune-s-dream-800: #274465;
--color-neptune-s-dream-900: #1a2f47;
--color-neptune-s-dream-950: #0a1b2e;
}SCSS
$neptune-s-dream: #003164;
$neptune-s-dream-rgb: 0, 49, 100;
$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);
}