Nazwany kolor · #7E8FBB
Opal Violet
Opal Violet to #7E8FBB: rgb(126 143 187), hsl(223 31% 61%), oklch(0.653 0.069 268.1). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Blue mean? → · Opal Violet color name →
#7E8FBB
oklch(0.653 0.069 268.1)
Konwersje koloru
- HEX
- #7e8fbb
- RGB
- rgb(126 143 187)
- HSL
- hsl(223 31% 61%)
- HWB
- hwb(223 49% 27%)
- OKLCH
- oklch(0.653 0.069 268.1)
- OKLab
- oklab(0.653 -0.002 -0.069)
- CIE Lab
- lab(59.29 1.71 -25.23)
- LCH
- lch(59.29 25.29 273.9)
- CMYK
- cmyk(33% 24% 0% 27%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- 8A9AC2
- 96A5C9
- A3B0D0
- B0BBD7
- BDC6DD
- CAD1E4
- D7DDEB
- E4E8F2
- F1F3F8
Odcienie ciemniejsze
- 6D7CA2
- 5C698A
- 4C5773
- 3C455C
- 2D3446
- 1F2432
- 11151F
- 05070D
- 010102
Tony
- 7E8EB5
- 7E8CAF
- 7F8BA9
- 7F89A4
- 7F889E
- 7F8698
- 7F8592
- 80838C
- 808286
Harmonie kolorów
Komplementarna +180°
- 7E8FBB
Opal Violet
- A28E5F
≈ Camouflage Olive
Analogowa -30° +30°
- 7E8FBB
Opal Violet
- 6797B6
≈ Aragonite Blue
- 9587B5
≈ Silk Lilac
Triada +120° +240°
- 7E8FBB
Opal Violet
- B78079
≈ Ash Rose
- 739C79
≈ Holiday Camp
Komplementarna rozszczepiona +150° +210°
- 7E8FBB
Opal Violet
- B08666
≈ Syrup
- 8C9666
≈ Bullfrog
Tetrada +90° +180° +270°
- 7E8FBB
Opal Violet
- B37F90
≈ Degas Pink
- A28E5F
≈ Camouflage Olive
- 5F9E90
≈ Dull Teal
Kontrast i dostępność
Ag
FailNa bieli
WCAG 3.21:1 · APCA Lc 59
Ag
AANa czerni
WCAG 6.53:1 · APCA Lc 42
Najlepszy kolor tekstu: #000000
WCAG 6.53:1 (AA) · APCA Lc 42
Contrast pairs
Fragmenty kodu
CSS
:root {
--opal-violet: #7e8fbb;
--opal-violet-rgb: 126 143 187;
--opal-violet-oklch: oklch(0.653 0.069 268.1);
}
.element {
color: var(--opal-violet);
background-color: hsl(223 31% 61%);
border-color: oklch(0.653 0.069 268.1);
}Tailwind CSS v4
@theme {
--color-opal-violet: #7e8fbb;
--color-opal-violet-50: #edf5ff;
--color-opal-violet-100: #dfe7ff;
--color-opal-violet-200: #c9d4f3;
--color-opal-violet-300: #a9b6dc;
--color-opal-violet-400: #8d9dc8;
--color-opal-violet-500: #7385b5;
--color-opal-violet-600: #617098;
--color-opal-violet-700: #4d5a7a;
--color-opal-violet-800: #37425b;
--color-opal-violet-900: #262d3f;
--color-opal-violet-950: #141a28;
}SCSS
$opal-violet: #7e8fbb;
$opal-violet-rgb: 126, 143, 187;
$opal-violet-light: mix(#fff, $opal-violet, 20%);
$opal-violet-dark: mix(#000, $opal-violet, 20%);
.element {
color: $opal-violet;
box-shadow: 0 0 0 2px rgba($opal-violet, 0.35);
}