Nazwany kolor · #AA3344
Toasted Truffle
Toasted Truffle to #AA3344: rgb(170 51 68), hsl(351 54% 43%), oklch(0.503 0.154 16.6). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Red mean? → · Toasted Truffle color name →
#AA3344
oklch(0.503 0.154 16.6)
Konwersje koloru
- HEX
- #aa3344
- RGB
- rgb(170 51 68)
- HSL
- hsl(351 54% 43%)
- HWB
- hwb(351 20% 33%)
- OKLCH
- oklch(0.503 0.154 16.6)
- OKLab
- oklab(0.503 0.148 0.044)
- CIE Lab
- lab(40.68 49.81 19.12)
- LCH
- lch(40.68 53.36 21)
- CMYK
- cmyk(0% 70% 60% 33%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- B54A55
- BF5F67
- C97378
- D2878B
- DB9B9D
- E3AFB0
- EBC3C3
- F2D7D7
- F9EBEB
Odcienie ciemniejsze
- 932B3A
- 7D2330
- 681C26
- 53141D
- 3F0D14
- 2D070C
- 1B0305
- 0B0102
- 010000
Tony
- A73E4A
- A44750
- A15056
- 9E585C
- 9A5F62
- 966668
- 916D6E
- 8C7374
- 867A7A
Harmonie kolorów
Komplementarna +180°
- AA3344
Toasted Truffle
- 007375
≈ Natural Instinct Green
Analogowa -30° +30°
- AA3344
Toasted Truffle
- 9E3676
≈ Maximum Red Purple
- A24400
≈ Powdered Coffee
Triada +120° +240°
- AA3344
Toasted Truffle
- 357600
≈ Gardens Sericourt
- 1C62BA
≈ Amnesia Blue
Komplementarna rozszczepiona +150° +210°
- AA3344
Toasted Truffle
- 007657
≈ Victoria Peak
- 006E8E
≈ Seaport
Tetrada +90° +180° +270°
- AA3344
Toasted Truffle
- 6C6700
≈ Earthy Khaki Green
- 007375
≈ Natural Instinct Green
- 6151B6
≈ Circumorbital Ring
Kontrast i dostępność
Ag
AANa bieli
WCAG 6.42:1 · APCA Lc 81
Ag
FailNa czerni
WCAG 3.26:1 · APCA Lc 21
Najlepszy kolor tekstu: #FFFFFF
WCAG 6.42:1 (AA) · APCA Lc 81
Contrast pairs
Fragmenty kodu
CSS
:root {
--toasted-truffle: #aa3344;
--toasted-truffle-rgb: 170 51 68;
--toasted-truffle-oklch: oklch(0.503 0.154 16.6);
}
.element {
color: var(--toasted-truffle);
background-color: hsl(351 54% 43%);
border-color: oklch(0.503 0.154 16.6);
}Tailwind CSS v4
@theme {
--color-toasted-truffle: #aa3344;
--color-toasted-truffle-50: #ffe4e4;
--color-toasted-truffle-100: #ffd4d4;
--color-toasted-truffle-200: #ffbabb;
--color-toasted-truffle-300: #fc9699;
--color-toasted-truffle-400: #eb747e;
--color-toasted-truffle-500: #d95161;
--color-toasted-truffle-600: #b74653;
--color-toasted-truffle-700: #933842;
--color-toasted-truffle-800: #6e2731;
--color-toasted-truffle-900: #4d1a21;
--color-toasted-truffle-950: #330a11;
}SCSS
$toasted-truffle: #aa3344;
$toasted-truffle-rgb: 170, 51, 68;
$toasted-truffle-light: mix(#fff, $toasted-truffle, 20%);
$toasted-truffle-dark: mix(#000, $toasted-truffle, 20%);
.element {
color: $toasted-truffle;
box-shadow: 0 0 0 2px rgba($toasted-truffle, 0.35);
}