Nearest named color · #1640D4
#1640D4
Nearest named color: Sapphire Glitter
#1640D4 (rgb(22 64 212), hsl(227 81% 46%), oklch(0.459 0.229 265)) is closest to the named color Sapphire Glitter. See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
#1640D4
oklch(0.459 0.229 265)
Color conversions
- 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%)
Tints · Shades · Tones
Tints
- 2A58DA
- 406DE0
- 5681E6
- 6D93EB
- 84A6F0
- 9CB8F4
- B4CAF8
- CDDCFB
- E6EDFD
Shades
- 1236B8
- 0D2D9D
- 092483
- 061B69
- 031351
- 020B3A
- 010524
- 000110
- 000002
Tones
- 204BCD
- 2A54C5
- 355CBD
- 4062B6
- 4B69AE
- 556EA5
- 60739D
- 6B7894
- 757C8A
Color harmonies
Complementary +180°
- 1640D4
Sapphire Glitter
- 705200
≈ Pickled Grape Leaves
Analogous -30° +30°
- 1640D4
Sapphire Glitter
- 005F86
≈ Blue Flame
- 671EC6
≈ Purple Spot
Triadic +120° +240°
- 1640D4
Sapphire Glitter
- A70019
≈ Castlevania Heart
- 006B19
≈ Leafy Lush
Split-complementary +150° +210°
- 1640D4
Sapphire Glitter
- 864300
≈ Chocolate Pancakes
- 565E00
≈ Greensboro
Tetradic +90° +180° +270°
- 1640D4
Sapphire Glitter
- 9F005D
≈ Deep Magenta
- 705200
≈ Pickled Grape Leaves
- 006755
≈ Piney Lake
Contrast & accessibility
Ag
AAAOn white
WCAG 7.72:1 · APCA Lc 86
Ag
FailOn black
WCAG 2.71:1 · APCA Lc 16
Best text color: #FFFFFF
WCAG 7.72:1 (AAA) · APCA Lc 86
Contrast pairs
Code snippets
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);
}