Nazwany kolor · #662288
Sapphire Siren
Sapphire Siren to #662288: rgb(102 34 136), hsl(280 60% 33%), oklch(0.407 0.164 311.7). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Purple mean? → · Sapphire Siren color name →
#662288
oklch(0.407 0.164 311.7)
Konwersje koloru
- HEX
- #662288
- RGB
- rgb(102 34 136)
- HSL
- hsl(280 60% 33%)
- HWB
- hwb(280 13% 47%)
- OKLCH
- oklch(0.407 0.164 311.7)
- OKLab
- oklab(0.407 0.109 -0.123)
- CIE Lab
- lab(28.37 43.14 -43.73)
- LCH
- lch(28.37 61.42 314.6)
- CMYK
- cmyk(25% 75% 0% 47%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- 753B95
- 8351A1
- 9266AD
- A17CB9
- B091C5
- C0A6D1
- CFBCDD
- DFD2E8
- EFE8F4
Odcienie ciemniejsze
- 581C75
- 4A1663
- 3C1152
- 2F0B41
- 230731
- 170322
- 0C0113
- 040006
- 000001
Tony
- 692F88
- 6C3A88
- 6E4488
- 714D87
- 745686
- 765F86
- 796784
- 7B7083
- 7E7882
Harmonie kolorów
Komplementarna +180°
- 662288
Sapphire Siren
- 325500
≈ Deep Forestial Escapade
Analogowa -30° +30°
- 662288
Sapphire Siren
- 40349E
≈ Purple Cabbage
- 7F0F62
≈ Xereus Purple
Triada +120° +240°
- 662288
Sapphire Siren
- 664000
≈ Notorious Neanderthal
- 005553
≈ Tabriz Teal
Komplementarna rozszczepiona +150° +210°
- 662288
Sapphire Siren
- 534A00
≈ Scorzonera Brown
- 00583A
≈ Sacramento State Green
Tetrada +90° +180° +270°
- 662288
Sapphire Siren
- 7D2B00
≈ Reddish Brown
- 325500
≈ Deep Forestial Escapade
- 005266
≈ Rainy Morning
Kontrast i dostępność
Ag
AAANa bieli
WCAG 9.77:1 · APCA Lc 92
Ag
FailNa czerni
WCAG 2.14:1 · APCA Lc 11
Najlepszy kolor tekstu: #FFFFFF
WCAG 9.77:1 (AAA) · APCA Lc 92
Contrast pairs
Fragmenty kodu
CSS
:root {
--sapphire-siren: #662288;
--sapphire-siren-rgb: 102 34 136;
--sapphire-siren-oklch: oklch(0.407 0.164 311.7);
}
.element {
color: var(--sapphire-siren);
background-color: hsl(280 60% 33%);
border-color: oklch(0.407 0.164 311.7);
}Tailwind CSS v4
@theme {
--color-sapphire-siren: #662288;
--color-sapphire-siren-50: #ffe8ff;
--color-sapphire-siren-100: #fcd8ff;
--color-sapphire-siren-200: #eec0ff;
--color-sapphire-siren-300: #d69df2;
--color-sapphire-siren-400: #be7fe4;
--color-sapphire-siren-500: #aa5fd4;
--color-sapphire-siren-600: #8f51b3;
--color-sapphire-siren-700: #73418f;
--color-sapphire-siren-800: #532f6c;
--color-sapphire-siren-900: #3a204c;
--color-sapphire-siren-950: #240f32;
}SCSS
$sapphire-siren: #662288;
$sapphire-siren-rgb: 102, 34, 136;
$sapphire-siren-light: mix(#fff, $sapphire-siren, 20%);
$sapphire-siren-dark: mix(#000, $sapphire-siren, 20%);
.element {
color: $sapphire-siren;
box-shadow: 0 0 0 2px rgba($sapphire-siren, 0.35);
}