Adlandırılmış renk · #2425B9
Sapphire Splendour
Sapphire Splendour, #2425B9: rgb(36 37 185), hsl(240 67% 43%), oklch(0.395 0.22 270.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? → · Sapphire Splendour color name →
#2425B9
oklch(0.395 0.22 270.2)
Renk dönüşümleri
- HEX
- #2425b9
- RGB
- rgb(36 37 185)
- HSL
- hsl(240 67% 43%)
- HWB
- hwb(240 14% 27%)
- OKLCH
- oklch(0.395 0.22 270.2)
- OKLab
- oklab(0.395 0.001 -0.22)
- CIE Lab
- lab(25.74 41.93 -78.09)
- LCH
- lch(25.74 88.63 298.2)
- CMYK
- cmyk(81% 80% 0% 27%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- 3143C2
- 435BCB
- 5770D3
- 6D85DB
- 839AE2
- 9BAEE9
- B3C2EF
- CCD6F5
- E5EBFA
Koyu tonlar
- 1E1FA0
- 181989
- 121371
- 0C0D5B
- 070846
- 040431
- 02021E
- 00000D
- 000002
Gri tonlar
- 2935B5
- 3042B0
- 384CAB
- 4155A6
- 4B5EA1
- 55659B
- 5F6C95
- 6A738F
- 757A88
Renk uyumları
Tamamlayıcı +180°
- 2425B9
Sapphire Splendour
- 574400
≈ Sugarloaf Brown
Analog -30° +30°
- 2425B9
Sapphire Splendour
- 004B72
≈ Broadwater Blue
- 5C00A3
≈ Aubergine Perl
Üçlü +120° +240°
- 2425B9
Sapphire Splendour
- 870800
≈ Indian Red
- 005624
≈ O Tannenbaum
Bölünmüş tamamlayıcı +150° +210°
- 2425B9
Sapphire Splendour
- 693800
≈ Bestial Brown
- 404D00
≈ No Emissions Green
Dörtlü +90° +180° +270°
- 2425B9
Sapphire Splendour
- 830042
≈ Wine
- 574400
≈ Sugarloaf Brown
- 005348
≈ Breathe Deeply
Kontrast ve erişilebilirlik
Ag
AAABeyaz üzerinde
WCAG 10.29:1 · APCA Lc 93
Ag
FailSiyah üzerinde
WCAG 2.04:1 · APCA Lc 10
En iyi metin rengi: #FFFFFF
WCAG 10.29:1 (AAA) · APCA Lc 93
Contrast pairs
Kod parçacıkları
CSS
:root {
--sapphire-splendour: #2425b9;
--sapphire-splendour-rgb: 36 37 185;
--sapphire-splendour-oklch: oklch(0.395 0.22 270.2);
}
.element {
color: var(--sapphire-splendour);
background-color: hsl(240 67% 43%);
border-color: oklch(0.395 0.22 270.2);
}Tailwind CSS v4
@theme {
--color-sapphire-splendour: #2425b9;
--color-sapphire-splendour-50: #dff2ff;
--color-sapphire-splendour-100: #cee4ff;
--color-sapphire-splendour-200: #b4ceff;
--color-sapphire-splendour-300: #92adff;
--color-sapphire-splendour-400: #6e90ff;
--color-sapphire-splendour-500: #536fff;
--color-sapphire-splendour-600: #465fe9;
--color-sapphire-splendour-700: #384cbb;
--color-sapphire-splendour-800: #23388d;
--color-sapphire-splendour-900: #172764;
--color-sapphire-splendour-950: #091445;
}SCSS
$sapphire-splendour: #2425b9;
$sapphire-splendour-rgb: 36, 37, 185;
$sapphire-splendour-light: mix(#fff, $sapphire-splendour, 20%);
$sapphire-splendour-dark: mix(#000, $sapphire-splendour, 20%);
.element {
color: $sapphire-splendour;
box-shadow: 0 0 0 2px rgba($sapphire-splendour, 0.35);
}