Nazwany kolor · #7B5F46
Frontier Shingle
Frontier Shingle to #7B5F46: rgb(123 95 70), hsl(28 27% 38%), oklch(0.507 0.052 63). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Brown mean? → · Frontier Shingle color name →
#7B5F46
oklch(0.507 0.052 63)
Konwersje koloru
- HEX
- #7b5f46
- RGB
- rgb(123 95 70)
- HSL
- hsl(28 27% 38%)
- HWB
- hwb(28 27% 52%)
- OKLCH
- oklch(0.507 0.052 63)
- OKLab
- oklab(0.507 0.024 0.046)
- CIE Lab
- lab(42.74 9.12 18.92)
- LCH
- lch(42.74 21 64.3)
- CMYK
- cmyk(0% 23% 43% 52%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- 886E57
- 947D68
- A18C7A
- AE9C8C
- BCAC9F
- C9BCB1
- D6CCC4
- E4DDD8
- F1EEEB
Odcienie ciemniejsze
- 6A523C
- 5A4432
- 4A3828
- 3A2C1E
- 2C2015
- 1E150D
- 100A05
- 050302
- 010000
Tony
- 7C624C
- 7C6652
- 7D6958
- 7D6C5D
- 7E7063
- 7F7369
- 7F766F
- 7F7974
- 807D7A
Harmonie kolorów
Komplementarna +180°
- 7B5F46
Frontier Shingle
- 4B6981
≈ Eames for Blue
Analogowa -30° +30°
- 7B5F46
Frontier Shingle
- 805B52
≈ Wild West
- 6F6542
≈ Ocean Weed
Triada +120° +240°
- 7B5F46
Frontier Shingle
- 416F68
≈ Cormorant
- 6B5E7E
≈ Napa Winery
Komplementarna rozszczepiona +150° +210°
- 7B5F46
Frontier Shingle
- 406D77
≈ Holy Water
- 5B6484
≈ Enduring
Tetrada +90° +180° +270°
- 7B5F46
Frontier Shingle
- 4E6E57
≈ Daylight Jungle
- 4B6981
≈ Eames for Blue
- 785A72
≈ Gala Ball
Kontrast i dostępność
Ag
AANa bieli
WCAG 5.88:1 · APCA Lc 79
Ag
FailNa czerni
WCAG 3.56:1 · APCA Lc 22
Najlepszy kolor tekstu: #FFFFFF
WCAG 5.88:1 (AA) · APCA Lc 79
Contrast pairs
Fragmenty kodu
CSS
:root {
--frontier-shingle: #7b5f46;
--frontier-shingle-rgb: 123 95 70;
--frontier-shingle-oklch: oklch(0.507 0.052 63);
}
.element {
color: var(--frontier-shingle);
background-color: hsl(28 27% 38%);
border-color: oklch(0.507 0.052 63);
}Tailwind CSS v4
@theme {
--color-frontier-shingle: #7b5f46;
--color-frontier-shingle-50: #fff2e6;
--color-frontier-shingle-100: #f5e5d6;
--color-frontier-shingle-200: #e4d0be;
--color-frontier-shingle-300: #cbb29c;
--color-frontier-shingle-400: #b5987f;
--color-frontier-shingle-500: #9f7f62;
--color-frontier-shingle-600: #876c54;
--color-frontier-shingle-700: #6c5643;
--color-frontier-shingle-800: #503e30;
--color-frontier-shingle-900: #382b20;
--color-frontier-shingle-950: #221810;
}SCSS
$frontier-shingle: #7b5f46;
$frontier-shingle-rgb: 123, 95, 70;
$frontier-shingle-light: mix(#fff, $frontier-shingle, 20%);
$frontier-shingle-dark: mix(#000, $frontier-shingle, 20%);
.element {
color: $frontier-shingle;
box-shadow: 0 0 0 2px rgba($frontier-shingle, 0.35);
}