Nazwany kolor · #235C8E
Sapphire Lace
Sapphire Lace to #235C8E: rgb(35 92 142), hsl(208 60% 35%), oklch(0.463 0.101 248.4). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Blue mean? → · Sapphire Lace color name →
#235C8E
oklch(0.463 0.101 248.4)
Konwersje koloru
- HEX
- #235c8e
- RGB
- rgb(35 92 142)
- HSL
- hsl(208 60% 35%)
- HWB
- hwb(208 14% 44%)
- OKLCH
- oklch(0.463 0.101 248.4)
- OKLab
- oklab(0.463 -0.037 -0.094)
- CIE Lab
- lab(37.27 -5.16 -33.63)
- LCH
- lch(37.27 34.03 261.3)
- CMYK
- cmyk(75% 35% 0% 44%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- 3A6C99
- 507BA5
- 658BB0
- 7A9BBC
- 90ABC7
- A6BCD2
- BBCCDD
- D2DDE9
- E8EEF4
Odcienie ciemniejsze
- 1D4F7B
- 174268
- 113656
- 0C2A44
- 071F34
- 041424
- 010A15
- 000307
- 000001
Tony
- 2F608D
- 39648C
- 43688B
- 4C6B8A
- 556F88
- 5E7387
- 677685
- 6F7984
- 787D82
Harmonie kolorów
Komplementarna +180°
- 235C8E
Sapphire Lace
- 7D4C01
≈ Gédéon Brown
Analogowa -30° +30°
- 235C8E
Sapphire Lace
- 006378
≈ Atlantis Myth
- 4D5190
≈ Twilight
Triada +120° +240°
- 235C8E
Sapphire Lace
- 873E4D
≈ Burnt Russet
- 48631E
≈ Camouflage Green
Komplementarna rozszczepiona +150° +210°
- 235C8E
Sapphire Lace
- 87422C
≈ Olive Niçoise
- 675900
≈ Ayahuasca Vine
Tetrada +90° +180° +270°
- 235C8E
Sapphire Lace
- 7C406C
≈ Deep Commitment to Purple
- 7D4C01
≈ Gédéon Brown
- 126943
≈ Jewel
Kontrast i dostępność
Ag
AAANa bieli
WCAG 7.01:1 · APCA Lc 84
Ag
FailNa czerni
WCAG 2.99:1 · APCA Lc 18
Najlepszy kolor tekstu: #FFFFFF
WCAG 7.01:1 (AAA) · APCA Lc 84
Contrast pairs
Fragmenty kodu
CSS
:root {
--sapphire-lace: #235c8e;
--sapphire-lace-rgb: 35 92 142;
--sapphire-lace-oklch: oklch(0.463 0.101 248.4);
}
.element {
color: var(--sapphire-lace);
background-color: hsl(208 60% 35%);
border-color: oklch(0.463 0.101 248.4);
}Tailwind CSS v4
@theme {
--color-sapphire-lace: #235c8e;
--color-sapphire-lace-50: #e0f8ff;
--color-sapphire-lace-100: #d0ebff;
--color-sapphire-lace-200: #b5d8ff;
--color-sapphire-lace-300: #91bcea;
--color-sapphire-lace-400: #6ea3d7;
--color-sapphire-lace-500: #4c8bc6;
--color-sapphire-lace-600: #4176a7;
--color-sapphire-lace-700: #345e86;
--color-sapphire-lace-800: #224563;
--color-sapphire-lace-900: #173046;
--color-sapphire-lace-950: #081c2d;
}SCSS
$sapphire-lace: #235c8e;
$sapphire-lace-rgb: 35, 92, 142;
$sapphire-lace-light: mix(#fff, $sapphire-lace, 20%);
$sapphire-lace-dark: mix(#000, $sapphire-lace, 20%);
.element {
color: $sapphire-lace;
box-shadow: 0 0 0 2px rgba($sapphire-lace, 0.35);
}