En yakın adlandırılmış renk · #1640D4
#1640D4
En yakın adlandırılmış renk: Sapphire Glitter
#1640D4 (rgb(22 64 212), hsl(227 81% 46%), oklch(0.459 0.229 265)) en çok Sapphire Glitter 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.
#1640D4
oklch(0.459 0.229 265)
Renk dönüşümleri
- HEX
- #1640d4
- RGB
- rgb(22 64 212)
- HSL
- hsl(227 81% 46%)
- HWB
- hwb(227 9% 17%)
- OKLCH
- oklch(0.459 0.229 265)
- OKLab
- oklab(0.459 -0.02 -0.228)
- CIE Lab
- lab(33.66 33.8 -80.79)
- LCH
- lch(33.66 87.57 292.7)
- CMYK
- cmyk(90% 70% 0% 17%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- 2A58DA
- 406DE0
- 5681E6
- 6D93EB
- 84A6F0
- 9CB8F4
- B4CAF8
- CDDCFB
- E6EDFD
Koyu tonlar
- 1236B8
- 0D2D9D
- 092483
- 061B69
- 031351
- 020B3A
- 010524
- 000110
- 000002
Gri tonlar
- 204BCD
- 2A54C5
- 355CBD
- 4062B6
- 4B69AE
- 556EA5
- 60739D
- 6B7894
- 757C8A
Renk uyumları
Tamamlayıcı +180°
- 1640D4
Sapphire Glitter
- 705200
≈ Pickled Grape Leaves
Analog -30° +30°
- 1640D4
Sapphire Glitter
- 005F86
≈ Blue Flame
- 671EC6
≈ Purple Spot
Üçlü +120° +240°
- 1640D4
Sapphire Glitter
- A70019
≈ Castlevania Heart
- 006B19
≈ Leafy Lush
Bölünmüş tamamlayıcı +150° +210°
- 1640D4
Sapphire Glitter
- 864300
≈ Chocolate Pancakes
- 565E00
≈ Greensboro
Dörtlü +90° +180° +270°
- 1640D4
Sapphire Glitter
- 9F005D
≈ Deep Magenta
- 705200
≈ Pickled Grape Leaves
- 006755
≈ Piney Lake
Kontrast ve erişilebilirlik
Ag
AAABeyaz üzerinde
WCAG 7.72:1 · APCA Lc 86
Ag
FailSiyah üzerinde
WCAG 2.71:1 · APCA Lc 16
En iyi metin rengi: #FFFFFF
WCAG 7.72:1 (AAA) · APCA Lc 86
Contrast pairs
Kod parçacıkları
CSS
:root {
--sapphire-glitter: #1640d4;
--sapphire-glitter-rgb: 22 64 212;
--sapphire-glitter-oklch: oklch(0.459 0.229 265);
}
.element {
color: var(--sapphire-glitter);
background-color: hsl(227 81% 46%);
border-color: oklch(0.459 0.229 265);
}Tailwind CSS v4
@theme {
--color-sapphire-glitter: #1640d4;
--color-sapphire-glitter-50: #d8f4ff;
--color-sapphire-glitter-100: #c5e6ff;
--color-sapphire-glitter-200: #a8d0ff;
--color-sapphire-glitter-300: #83b0ff;
--color-sapphire-glitter-400: #5a93ff;
--color-sapphire-glitter-500: #3873ff;
--color-sapphire-glitter-600: #3162ee;
--color-sapphire-glitter-700: #264fbf;
--color-sapphire-glitter-800: #133a90;
--color-sapphire-glitter-900: #0c2866;
--color-sapphire-glitter-950: #021547;
}SCSS
$sapphire-glitter: #1640d4;
$sapphire-glitter-rgb: 22, 64, 212;
$sapphire-glitter-light: mix(#fff, $sapphire-glitter, 20%);
$sapphire-glitter-dark: mix(#000, $sapphire-glitter, 20%);
.element {
color: $sapphire-glitter;
box-shadow: 0 0 0 2px rgba($sapphire-glitter, 0.35);
}