Adlandırılmış renk · #10246A
Abyssal Depths
Abyssal Depths, #10246A: rgb(16 36 106), hsl(227 74% 24%), oklch(0.297 0.125 266.2). Açık tonlar, koyu tonlar, uyumlar, WCAG ve APCA kontrastı ile CSS, Tailwind v4 ve SCSS kodunu görün.
What does Blue mean? → · Abyssal Depths color name →
#10246A
oklch(0.297 0.125 266.2)
Renk dönüşümleri
- 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%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- 233A79
- 384F89
- 4E6498
- 6579A7
- 7D8EB6
- 96A4C4
- AFBAD3
- C9D1E2
- E4E8F0
Koyu tonlar
- 0C1E5B
- 09184D
- 06123F
- 040C31
- 020724
- 010418
- 00020D
- 000004
- 000000
Gri tonlar
- 1A2F6D
- 243870
- 2E4273
- 394B75
- 455478
- 505D7A
- 5C667C
- 686E7D
- 74777F
Renk uyumları
Tamamlayıcı +180°
- 10246A
Abyssal Depths
- 3A2A00
≈ Secret Passage
Analog -30° +30°
- 10246A
Abyssal Depths
- 003149
≈ Cosmos Blue
- 351762
≈ Candied Blueberry
Üçlü +120° +240°
- 10246A
Abyssal Depths
- 5B0006
≈ Spikey Red
- 00380D
≈ Gameboy Contrast
Bölünmüş tamamlayıcı +150° +210°
- 10246A
Abyssal Depths
- 472100
≈ Blackened Brown
- 2B3100
≈ Blind Forest
Dörtlü +90° +180° +270°
- 10246A
Abyssal Depths
- 57002F
≈ Mulberry Wood
- 3A2A00
≈ Secret Passage
- 00362C
≈ Coach Green
Kontrast ve erişilebilirlik
Ag
AAABeyaz üzerinde
WCAG 14.16:1 · APCA Lc 100
Ag
FailSiyah üzerinde
WCAG 1.48:1 · APCA Lc 0
En iyi metin rengi: #FFFFFF
WCAG 14.16:1 (AAA) · APCA Lc 100
Contrast pairs
Kod parçacıkları
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);
}