Nazwany kolor · #658DC6
Provence
Provence to #658DC6: rgb(101 141 198), hsl(215 46% 59%), oklch(0.638 0.097 257.3). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Blue mean? → · Provence color name →
#658DC6
oklch(0.638 0.097 257.3)
Konwersje koloru
- HEX
- #658dc6
- RGB
- rgb(101 141 198)
- HSL
- hsl(215 46% 59%)
- HWB
- hwb(215 40% 22%)
- OKLCH
- oklch(0.638 0.097 257.3)
- OKLab
- oklab(0.638 -0.021 -0.095)
- CIE Lab
- lab(57.48 -2.14 -34.38)
- LCH
- lch(57.48 34.45 266.4)
- CMYK
- cmyk(49% 29% 0% 22%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- 7498CC
- 83A3D2
- 92AFD8
- A1BADE
- B0C5E4
- C0D1E9
- CFDCEF
- DFE8F4
- EFF3FA
Odcienie ciemniejsze
- 577AAC
- 496792
- 3C557A
- 2F4462
- 22334B
- 172335
- 0C1421
- 03070E
- 000102
Tony
- 688CBF
- 6B8BB8
- 6E8AB1
- 7188AA
- 7387A3
- 76869C
- 798595
- 7B838E
- 7E8287
Harmonie kolorów
Komplementarna +180°
- 658DC6
Provence
- AC8342
≈ Walnut Shell
Analogowa -30° +30°
- 658DC6
Provence
- 4097B9
≈ Coastline Blue
- 8882C3
≈ Faraway Sky
Triada +120° +240°
- 658DC6
Provence
- BF7276
≈ Brandied Apricot
- 6F995E
≈ Meadow Green
Komplementarna rozszczepiona +150° +210°
- 658DC6
Provence
- BC7957
≈ Moroccan Sky
- 929045
≈ April Hills
Tetrada +90° +180° +270°
Kontrast i dostępność
Ag
FailNa bieli
WCAG 3.39:1 · APCA Lc 61
Ag
AANa czerni
WCAG 6.17:1 · APCA Lc 40
Najlepszy kolor tekstu: #000000
WCAG 6.17:1 (AA) · APCA Lc 40
Contrast pairs
Fragmenty kodu
CSS
:root {
--provence: #658dc6;
--provence-rgb: 101 141 198;
--provence-oklch: oklch(0.638 0.097 257.3);
}
.element {
color: var(--provence);
background-color: hsl(215 46% 59%);
border-color: oklch(0.638 0.097 257.3);
}Tailwind CSS v4
@theme {
--color-provence: #658dc6;
--color-provence-50: #e5f6ff;
--color-provence-100: #d5e9ff;
--color-provence-200: #bcd6fe;
--color-provence-300: #9ab9ea;
--color-provence-400: #7aa0d8;
--color-provence-500: #5c87c6;
--color-provence-600: #4e73a7;
--color-provence-700: #3e5c86;
--color-provence-800: #2b4363;
--color-provence-900: #1d2f46;
--color-provence-950: #0d1b2d;
}SCSS
$provence: #658dc6;
$provence-rgb: 101, 141, 198;
$provence-light: mix(#fff, $provence, 20%);
$provence-dark: mix(#000, $provence, 20%);
.element {
color: $provence;
box-shadow: 0 0 0 2px rgba($provence, 0.35);
}