Nazwany kolor · #C28A35
Butter Base
Butter Base to #C28A35: rgb(194 138 53), hsl(36 57% 48%), oklch(0.674 0.12 74). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Orange mean? → · Butter Base color name →
#C28A35
oklch(0.674 0.12 74)
Konwersje koloru
- HEX
- #c28a35
- RGB
- rgb(194 138 53)
- HSL
- hsl(36 57% 48%)
- HWB
- hwb(36 21% 24%)
- OKLCH
- oklch(0.674 0.12 74)
- OKLab
- oklab(0.674 0.033 0.116)
- CIE Lab
- lab(62.03 16.28 52.18)
- LCH
- lch(62.03 54.66 72.7)
- CMYK
- cmyk(0% 29% 73% 24%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- C8964E
- CFA163
- D5AD78
- DBB98B
- E1C49F
- E8D0B2
- EEDCC5
- F3E7D8
- F9F3EC
Odcienie ciemniejsze
- A8772D
- 8F6525
- 77531D
- 604215
- 49320E
- 342208
- 201403
- 0E0701
- 020100
Tony
- BC8941
- B5894B
- AE8853
- A8875B
- A18662
- 9B8569
- 94846F
- 8D8375
- 87817B
Harmonie kolorów
Komplementarna +180°
- C28A35
Butter Base
- 6099DF
≈ Little Boy Blue
Analogowa -30° +30°
- C28A35
Butter Base
- D37C56
≈ Jack-O-Lantern
- A39A35
≈ Pestulance
Triada +120° +240°
- C28A35
Butter Base
- 00ACAB
≈ Jade Orchid
- B17FCA
≈ Wisteria
Komplementarna rozszczepiona +150° +210°
- C28A35
Butter Base
- 1FA5CD
≈ Sardinia Beaches
- 8E8BDE
≈ Perrywinkle
Tetrada +90° +180° +270°
- C28A35
Butter Base
- 3DAD82
≈ Divot
- 6099DF
≈ Little Boy Blue
- CA77A8
≈ Strawberry Freeze
Kontrast i dostępność
Ag
FailNa bieli
WCAG 3.00:1 · APCA Lc 57
Ag
AANa czerni
WCAG 6.98:1 · APCA Lc 45
Najlepszy kolor tekstu: #000000
WCAG 6.98:1 (AA) · APCA Lc 45
Contrast pairs
Fragmenty kodu
CSS
:root {
--butter-base: #c28a35;
--butter-base-rgb: 194 138 53;
--butter-base-oklch: oklch(0.674 0.12 74);
}
.element {
color: var(--butter-base);
background-color: hsl(36 57% 48%);
border-color: oklch(0.674 0.12 74);
}Tailwind CSS v4
@theme {
--color-butter-base: #c28a35;
--color-butter-base-50: #fff1d0;
--color-butter-base-100: #ffe3bc;
--color-butter-base-200: #f2ce9a;
--color-butter-base-300: #dbaf6f;
--color-butter-base-400: #c99345;
--color-butter-base-500: #b57800;
--color-butter-base-600: #996607;
--color-butter-base-700: #7a5108;
--color-butter-base-800: #5c3a05;
--color-butter-base-900: #402804;
--color-butter-base-950: #291600;
}SCSS
$butter-base: #c28a35;
$butter-base-rgb: 194, 138, 53;
$butter-base-light: mix(#fff, $butter-base, 20%);
$butter-base-dark: mix(#000, $butter-base, 20%);
.element {
color: $butter-base;
box-shadow: 0 0 0 2px rgba($butter-base, 0.35);
}