Nazwany kolor · #B78846
Holiday Waffle
Holiday Waffle to #B78846: rgb(183 136 70), hsl(35 45% 50%), oklch(0.659 0.101 73.7). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Orange mean? → · Holiday Waffle color name →
#B78846
oklch(0.659 0.101 73.7)
Konwersje koloru
- HEX
- #b78846
- RGB
- rgb(183 136 70)
- HSL
- hsl(35 45% 50%)
- HWB
- hwb(35 27% 28%)
- OKLCH
- oklch(0.659 0.101 73.7)
- OKLab
- oklab(0.659 0.028 0.097)
- CIE Lab
- lab(60.39 13.29 42.09)
- LCH
- lch(60.39 44.14 72.5)
- CMYK
- cmyk(0% 26% 62% 28%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- BE945A
- C69F6D
- CDAB7F
- D4B791
- DCC3A3
- E3CFB6
- EADBC8
- F1E7DA
- F8F3EC
Odcienie ciemniejsze
- 9F753C
- 876332
- 705228
- 5A411E
- 453115
- 31220D
- 1E1305
- 0C0602
- 020100
Tony
- B2874E
- AC8755
- A7865B
- A18661
- 9C8567
- 96846D
- 918372
- 8B8277
- 86817B
Harmonie kolorów
Komplementarna +180°
- B78846
Holiday Waffle
- 6595CF
≈ Bashful Blue
Analogowa -30° +30°
- B78846
Holiday Waffle
- C67D5E
≈ Terracotta Chip
- 9C9546
≈ Lentil Sprout
Triada +120° +240°
- B78846
Holiday Waffle
- 2EA5A4
≈ Royal Cloak
- A87FBE
≈ Wisteria
Komplementarna rozszczepiona +150° +210°
- B78846
Holiday Waffle
- 3E9FC0
≈ Norse Blue
- 8A89CE
≈ Brocade
Tetrada +90° +180° +270°
- B78846
Holiday Waffle
- 4FA581
≈ Laurel Wreath
- 6595CF
≈ Bashful Blue
- BD78A1
≈ Hollyhock Blossom Pink
Kontrast i dostępność
Ag
FailNa bieli
WCAG 3.17:1 · APCA Lc 59
Ag
AANa czerni
WCAG 6.62:1 · APCA Lc 43
Najlepszy kolor tekstu: #000000
WCAG 6.62:1 (AA) · APCA Lc 43
Contrast pairs
Fragmenty kodu
CSS
:root {
--holiday-waffle: #b78846;
--holiday-waffle-rgb: 183 136 70;
--holiday-waffle-oklch: oklch(0.659 0.101 73.7);
}
.element {
color: var(--holiday-waffle);
background-color: hsl(35 45% 50%);
border-color: oklch(0.659 0.101 73.7);
}Tailwind CSS v4
@theme {
--color-holiday-waffle: #b78846;
--color-holiday-waffle-50: #fff2d6;
--color-holiday-waffle-100: #fce4c3;
--color-holiday-waffle-200: #eecfa4;
--color-holiday-waffle-300: #d6b17c;
--color-holiday-waffle-400: #c29557;
--color-holiday-waffle-500: #ae7b2e;
--color-holiday-waffle-600: #936829;
--color-holiday-waffle-700: #765320;
--color-holiday-waffle-800: #583c16;
--color-holiday-waffle-900: #3d290e;
--color-holiday-waffle-950: #271702;
}SCSS
$holiday-waffle: #b78846;
$holiday-waffle-rgb: 183, 136, 70;
$holiday-waffle-light: mix(#fff, $holiday-waffle, 20%);
$holiday-waffle-dark: mix(#000, $holiday-waffle, 20%);
.element {
color: $holiday-waffle;
box-shadow: 0 0 0 2px rgba($holiday-waffle, 0.35);
}