Nazwany kolor · #5F5D64
Baroque Grey
Baroque Grey to #5F5D64: rgb(95 93 100), hsl(257 4% 38%), oklch(0.483 0.011 299). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Gray mean? → · Baroque Grey color name →
#5F5D64
oklch(0.483 0.011 299)
Konwersje koloru
- HEX
- #5f5d64
- RGB
- rgb(95 93 100)
- HSL
- hsl(257 4% 38%)
- HWB
- hwb(257 36% 61%)
- OKLCH
- oklch(0.483 0.011 299)
- OKLab
- oklab(0.483 0.005 -0.01)
- CIE Lab
- lab(39.86 1.94 -3.72)
- LCH
- lch(39.86 4.2 297.5)
- CMYK
- cmyk(5% 7% 0% 61%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- 6E6C72
- 7D7B81
- 8C8A90
- 9C9A9F
- ABAAAE
- BCBBBE
- CCCBCE
- DDDCDE
- EEEEEE
Odcienie ciemniejsze
- 525056
- 444348
- 38373B
- 2C2A2E
- 201F22
- 151416
- 0A0A0B
- 030303
- 000000
Tony
- 626067
- 65646A
- 69676C
- 6C6B6F
- 6F6E72
- 737275
- 767577
- 79797A
- 7D7C7D
Harmonie kolorów
Komplementarna +180°
- 5F5D64
Baroque Grey
- 5D5F58
≈ Sable Evening
Analogowa -30° +30°
- 5F5D64
Baroque Grey
- 5C5E65
≈ Baroque Grey
- 625C61
≈ Volcanic Glass
Triada +120° +240°
- 5F5D64
Baroque Grey
- 635D58
≈ Deep Walnut
- 58615E
≈ Jasper Green
Komplementarna rozszczepiona +150° +210°
- 5F5D64
Baroque Grey
- 615E57
≈ Deep Walnut
- 5A605B
≈ Jasper Green
Tetrada +90° +180° +270°
- 5F5D64
Baroque Grey
- 655C5B
≈ Phantom Hue
- 5D5F58
≈ Sable Evening
- 576062
≈ Yacht Club
Kontrast i dostępność
Ag
AANa bieli
WCAG 6.48:1 · APCA Lc 82
Ag
FailNa czerni
WCAG 3.23:1 · APCA Lc 20
Najlepszy kolor tekstu: #FFFFFF
WCAG 6.48:1 (AA) · APCA Lc 82
Contrast pairs
Fragmenty kodu
CSS
:root {
--baroque-grey: #5f5d64;
--baroque-grey-rgb: 95 93 100;
--baroque-grey-oklch: oklch(0.483 0.011 299);
}
.element {
color: var(--baroque-grey);
background-color: hsl(257 4% 38%);
border-color: oklch(0.483 0.011 299);
}Tailwind CSS v4
@theme {
--color-baroque-grey: #5f5d64;
--color-baroque-grey-50: #f5f4f8;
--color-baroque-grey-100: #e8e7eb;
--color-baroque-grey-200: #d5d3d8;
--color-baroque-grey-300: #b8b6bc;
--color-baroque-grey-400: #9f9da4;
--color-baroque-grey-500: #87858d;
--color-baroque-grey-600: #727077;
--color-baroque-grey-700: #5b5a5f;
--color-baroque-grey-800: #434246;
--color-baroque-grey-900: #2e2d30;
--color-baroque-grey-950: #1b1a1d;
}SCSS
$baroque-grey: #5f5d64;
$baroque-grey-rgb: 95, 93, 100;
$baroque-grey-light: mix(#fff, $baroque-grey, 20%);
$baroque-grey-dark: mix(#000, $baroque-grey, 20%);
.element {
color: $baroque-grey;
box-shadow: 0 0 0 2px rgba($baroque-grey, 0.35);
}