Nazwany kolor · #1F22D2
Lapis on Neptune
Lapis on Neptune to #1F22D2: rgb(31 34 210), hsl(239 74% 47%), oklch(0.419 0.251 268.1). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Blue mean? → · Lapis on Neptune color name →
#1F22D2
oklch(0.419 0.251 268.1)
Konwersje koloru
- HEX
- #1f22d2
- RGB
- rgb(31 34 210)
- HSL
- hsl(239 74% 47%)
- HWB
- hwb(239 12% 18%)
- OKLCH
- oklch(0.419 0.251 268.1)
- OKLab
- oklab(0.419 -0.008 -0.251)
- CIE Lab
- lab(27.73 49.76 -89.44)
- LCH
- lch(27.73 102.35 299.1)
- CMYK
- cmyk(85% 84% 0% 18%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- 2B44D9
- 3D5EDF
- 5274E5
- 6889EB
- 809EF0
- 98B1F4
- B1C5F8
- CAD8FB
- E4ECFD
Odcienie ciemniejsze
- 191CB6
- 14169B
- 0F1181
- 0A0B68
- 060750
- 030339
- 010124
- 000010
- 000002
Tony
- 2336CB
- 2A44C4
- 334FBD
- 3D58B5
- 4761AD
- 5268A5
- 5D6F9D
- 697594
- 747B8A
Harmonie kolorów
Komplementarna +180°
- 1F22D2
Lapis on Neptune
- 604900
≈ Mud Brown
Analogowa -30° +30°
- 1F22D2
Lapis on Neptune
- 005379
≈ Ocean Spray
- 6200B4
≈ Indiviolet Sunset
Triada +120° +240°
- 1F22D2
Lapis on Neptune
- 940006
≈ Carnage Red
- 005E22
≈ Evergreen Shade
Komplementarna rozszczepiona +150° +210°
- 1F22D2
Lapis on Neptune
- 743C00
≈ Bloodtracker Brown
- 485300
≈ Highlands Moss
Tetrada +90° +180° +270°
- 1F22D2
Lapis on Neptune
- 8E004C
≈ Reddish Purple
- 604900
≈ Mud Brown
- 005A4D
≈ Forest Shadows
Kontrast i dostępność
Ag
AAANa bieli
WCAG 9.46:1 · APCA Lc 90
Ag
FailNa czerni
WCAG 2.21:1 · APCA Lc 12
Najlepszy kolor tekstu: #FFFFFF
WCAG 9.46:1 (AAA) · APCA Lc 90
Contrast pairs
Fragmenty kodu
CSS
:root {
--lapis-on-neptune: #1f22d2;
--lapis-on-neptune-rgb: 31 34 210;
--lapis-on-neptune-oklch: oklch(0.419 0.251 268.1);
}
.element {
color: var(--lapis-on-neptune);
background-color: hsl(239 74% 47%);
border-color: oklch(0.419 0.251 268.1);
}Tailwind CSS v4
@theme {
--color-lapis-on-neptune: #1f22d2;
--color-lapis-on-neptune-50: #d9f2ff;
--color-lapis-on-neptune-100: #c7e4ff;
--color-lapis-on-neptune-200: #abcdff;
--color-lapis-on-neptune-300: #87acff;
--color-lapis-on-neptune-400: #618dff;
--color-lapis-on-neptune-500: #4469ff;
--color-lapis-on-neptune-600: #3a5afa;
--color-lapis-on-neptune-700: #2d48c9;
--color-lapis-on-neptune-800: #193597;
--color-lapis-on-neptune-900: #10256b;
--color-lapis-on-neptune-950: #05114b;
}SCSS
$lapis-on-neptune: #1f22d2;
$lapis-on-neptune-rgb: 31, 34, 210;
$lapis-on-neptune-light: mix(#fff, $lapis-on-neptune, 20%);
$lapis-on-neptune-dark: mix(#000, $lapis-on-neptune, 20%);
.element {
color: $lapis-on-neptune;
box-shadow: 0 0 0 2px rgba($lapis-on-neptune, 0.35);
}