Adlandırılmış renk · #2D96CE
Astrolabe Reef
Astrolabe Reef, #2D96CE: rgb(45 150 206), hsl(201 64% 49%), oklch(0.64 0.125 237.3). Açık tonlar, koyu tonlar, uyumlar, WCAG ve APCA kontrastı ile CSS, Tailwind v4 ve SCSS kodunu görün.
What does Blue mean? → · Astrolabe Reef color name →
#2D96CE
oklch(0.64 0.125 237.3)
Renk dönüşümleri
- HEX
- #2d96ce
- RGB
- rgb(45 150 206)
- HSL
- hsl(201 64% 49%)
- HWB
- hwb(201 18% 19%)
- OKLCH
- oklch(0.64 0.125 237.3)
- OKLab
- oklab(0.64 -0.067 -0.105)
- CIE Lab
- lab(58.22 -15.67 -37.92)
- LCH
- lch(58.22 41.03 247.5)
- CMYK
- cmyk(78% 27% 0% 19%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- 4AA1D3
- 61ABD9
- 76B6DE
- 8BC0E3
- 9ECBE8
- B2D5ED
- C5E0F2
- D8EAF6
- ECF5FB
Koyu tonlar
- 2682B3
- 1F6E98
- 185B7F
- 114966
- 0B374E
- 062638
- 021623
- 01080F
- 000102
Gri tonlar
- 3C94C6
- 4892BF
- 5290B7
- 5A8EAF
- 628CA7
- 698AA0
- 6F8898
- 758590
- 7B8388
Renk uyumları
Tamamlayıcı +180°
- 2D96CE
Astrolabe Reef
- C47737
≈ Orange Squash
Analog -30° +30°
- 2D96CE
Astrolabe Reef
- 009EAE
≈ Lake Blue
- 6B88D8
≈ Livid
Üçlü +120° +240°
- 2D96CE
Astrolabe Reef
- C76A8D
≈ Old Geranium
- 879632
≈ Chorus of Frogs
Bölünmüş tamamlayıcı +150° +210°
- 2D96CE
Astrolabe Reef
- CD6C62
≈ Matador’s Cape
- AC8618
≈ Chestnut Gold
Dörtlü +90° +180° +270°
- 2D96CE
Astrolabe Reef
- B46FB3
≈ Moonlight Melody
- C47737
≈ Orange Squash
- 52A05E
≈ Longing for Nature
Kontrast ve erişilebilirlik
Ag
FailBeyaz üzerinde
WCAG 3.29:1 · APCA Lc 60
Ag
AASiyah üzerinde
WCAG 6.36:1 · APCA Lc 42
En iyi metin rengi: #000000
WCAG 6.36:1 (AA) · APCA Lc 42
Contrast pairs
Kod parçacıkları
CSS
:root {
--astrolabe-reef: #2d96ce;
--astrolabe-reef-rgb: 45 150 206;
--astrolabe-reef-oklch: oklch(0.64 0.125 237.3);
}
.element {
color: var(--astrolabe-reef);
background-color: hsl(201 64% 49%);
border-color: oklch(0.64 0.125 237.3);
}Tailwind CSS v4
@theme {
--color-astrolabe-reef: #2d96ce;
--color-astrolabe-reef-50: #d6fbff;
--color-astrolabe-reef-100: #c3efff;
--color-astrolabe-reef-200: #a3dcff;
--color-astrolabe-reef-300: #79c0f0;
--color-astrolabe-reef-400: #4ba9df;
--color-astrolabe-reef-500: #0090ce;
--color-astrolabe-reef-600: #097aae;
--color-astrolabe-reef-700: #0a628b;
--color-astrolabe-reef-800: #004867;
--color-astrolabe-reef-900: #023248;
--color-astrolabe-reef-950: #001e2f;
}SCSS
$astrolabe-reef: #2d96ce;
$astrolabe-reef-rgb: 45, 150, 206;
$astrolabe-reef-light: mix(#fff, $astrolabe-reef, 20%);
$astrolabe-reef-dark: mix(#000, $astrolabe-reef, 20%);
.element {
color: $astrolabe-reef;
box-shadow: 0 0 0 2px rgba($astrolabe-reef, 0.35);
}