Nazwany kolor · #C27E43
Caramel Toffee
Caramel Toffee to #C27E43: rgb(194 126 67), hsl(28 51% 51%), oklch(0.652 0.113 59.7). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Orange mean? → · Caramel Toffee color name →
#C27E43
oklch(0.652 0.113 59.7)
Konwersje koloru
- HEX
- #c27e43
- RGB
- rgb(194 126 67)
- HSL
- hsl(28 51% 51%)
- HWB
- hwb(28 26% 24%)
- OKLCH
- oklch(0.652 0.113 59.7)
- OKLab
- oklab(0.652 0.057 0.097)
- CIE Lab
- lab(59.25 23.11 42.77)
- LCH
- lch(59.25 48.62 61.6)
- CMYK
- cmyk(0% 35% 65% 24%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- C98B57
- CF986A
- D6A47D
- DCB190
- E2BEA2
- E8CBB4
- EED8C7
- F4E5D9
- FAF2EC
Odcienie ciemniejsze
- A86D39
- 8F5C2F
- 774C26
- 603C1D
- 492D14
- 341F0C
- 201105
- 0E0501
- 020100
Tony
- BC7F4B
- B57F53
- AF8059
- A98060
- A28066
- 9B806B
- 958071
- 8E8076
- 87807B
Harmonie kolorów
Komplementarna +180°
- C27E43
Caramel Toffee
- 4598CD
≈ Blessed Blue
Analogowa -30° +30°
- C27E43
Caramel Toffee
- CC7466
≈ It’s My Party
- AB8C32
≈ Reef Gold
Triada +120° +240°
- C27E43
Caramel Toffee
- 1EA692
≈ Fishy House
- 9A7FCB
≈ Lilac Purple
Komplementarna rozszczepiona +150° +210°
- C27E43
Caramel Toffee
- 00A2B5
≈ January Blue
- 758CD5
≈ True Lavender
Tetrada +90° +180° +270°
- C27E43
Caramel Toffee
- 59A36A
≈ Great Gazoo
- 4598CD
≈ Blessed Blue
- B676B1
≈ Colombo Red Mauve
Kontrast i dostępność
Ag
FailNa bieli
WCAG 3.30:1 · APCA Lc 60
Ag
AANa czerni
WCAG 6.35:1 · APCA Lc 42
Najlepszy kolor tekstu: #000000
WCAG 6.35:1 (AA) · APCA Lc 42
Contrast pairs
Fragmenty kodu
CSS
:root {
--caramel-toffee: #c27e43;
--caramel-toffee-rgb: 194 126 67;
--caramel-toffee-oklch: oklch(0.652 0.113 59.7);
}
.element {
color: var(--caramel-toffee);
background-color: hsl(28 51% 51%);
border-color: oklch(0.652 0.113 59.7);
}Tailwind CSS v4
@theme {
--color-caramel-toffee: #c27e43;
--color-caramel-toffee-50: #ffefd5;
--color-caramel-toffee-100: #ffe0c2;
--color-caramel-toffee-200: #f8caa3;
--color-caramel-toffee-300: #e2ab7b;
--color-caramel-toffee-400: #cf8e57;
--color-caramel-toffee-500: #bc722d;
--color-caramel-toffee-600: #9f6128;
--color-caramel-toffee-700: #7f4d20;
--color-caramel-toffee-800: #5f3716;
--color-caramel-toffee-900: #43260e;
--color-caramel-toffee-950: #2b1402;
}SCSS
$caramel-toffee: #c27e43;
$caramel-toffee-rgb: 194, 126, 67;
$caramel-toffee-light: mix(#fff, $caramel-toffee, 20%);
$caramel-toffee-dark: mix(#000, $caramel-toffee, 20%);
.element {
color: $caramel-toffee;
box-shadow: 0 0 0 2px rgba($caramel-toffee, 0.35);
}