Couleur nommée la plus proche · #1640D4
#1640D4
Couleur nommée la plus proche: Sapphire Glitter
#1640D4 (rgb(22 64 212), hsl(227 81% 46%), oklch(0.459 0.229 265)) est la plus proche de la couleur nommée Sapphire Glitter. Teintes, ombres, harmonies, contraste WCAG et APCA, et code CSS, Tailwind v4 et SCSS.
#1640D4
oklch(0.459 0.229 265)
Conversions de couleur
- 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%)
Teintes · Ombres · Tons
Teintes
- 2A58DA
- 406DE0
- 5681E6
- 6D93EB
- 84A6F0
- 9CB8F4
- B4CAF8
- CDDCFB
- E6EDFD
Ombres
- 1236B8
- 0D2D9D
- 092483
- 061B69
- 031351
- 020B3A
- 010524
- 000110
- 000002
Tons
- 204BCD
- 2A54C5
- 355CBD
- 4062B6
- 4B69AE
- 556EA5
- 60739D
- 6B7894
- 757C8A
Harmonies de couleurs
Complémentaire +180°
- 1640D4
Sapphire Glitter
- 705200
≈ Pickled Grape Leaves
Analogue -30° +30°
- 1640D4
Sapphire Glitter
- 005F86
≈ Blue Flame
- 671EC6
≈ Purple Spot
Triadique +120° +240°
- 1640D4
Sapphire Glitter
- A70019
≈ Castlevania Heart
- 006B19
≈ Leafy Lush
Complémentaire divisée +150° +210°
- 1640D4
Sapphire Glitter
- 864300
≈ Chocolate Pancakes
- 565E00
≈ Greensboro
Tétradique +90° +180° +270°
- 1640D4
Sapphire Glitter
- 9F005D
≈ Deep Magenta
- 705200
≈ Pickled Grape Leaves
- 006755
≈ Piney Lake
Contraste et accessibilité
Ag
AAASur blanc
WCAG 7.72:1 · APCA Lc 86
Ag
FailSur noir
WCAG 2.71:1 · APCA Lc 16
Meilleure couleur de texte: #FFFFFF
WCAG 7.72:1 (AAA) · APCA Lc 86
Contrast pairs
Extraits de code
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);
}