Cor nomeada mais próxima · #C84B2D
#C84B2D
Cor nomeada mais próxima: Peanut Butter Jelly
#C84B2D (rgb(200 75 45), hsl(12 63% 48%), oklch(0.578 0.166 34.7)) é mais próxima da cor nomeada Peanut Butter Jelly. Veja tons claros, sombras, harmonias, contraste WCAG e APCA e código CSS, Tailwind v4 e SCSS.
#C84B2D
oklch(0.578 0.166 34.7)
Conversões de cor
- HEX
- #c84b2d
- RGB
- rgb(200 75 45)
- HSL
- hsl(12 63% 48%)
- HWB
- hwb(12 18% 22%)
- OKLCH
- oklch(0.578 0.166 34.7)
- OKLab
- oklab(0.578 0.136 0.094)
- CIE Lab
- lab(49.56 49.57 44.22)
- LCH
- lch(49.56 66.43 41.7)
- CMYK
- cmyk(0% 62% 77% 22%)
Tons claros · Sombras · Tons
Tons claros
- D05F44
- D77259
- DE846E
- E49682
- EAA797
- EFB9AB
- F4CAC0
- F8DCD5
- FCEDEA
Sombras
- AE4026
- 94351F
- 7B2B18
- 632111
- 4C170B
- 360E06
- 210602
- 0F0201
- 020000
Tons
- C25338
- BC5A42
- B6604B
- AF6553
- A86B5B
- A16F63
- 99746A
- 917872
- 897C79
Harmonias de cor
Complementar +180°
- C84B2D
Peanut Butter Jelly
- 00889F
≈ Toy Blue
Análoga -30° +30°
- C84B2D
Peanut Butter Jelly
- C5456D
≈ Love Lord
- AD6600
≈ Butter Fudge
Tríade +120° +240°
- C84B2D
Peanut Butter Jelly
- 009152
≈ Moss
- 5F6CDA
≈ Cornflower
Complementar dividida +150° +210°
- C84B2D
Peanut Butter Jelly
- 008D81
≈ Porcelain Green
- 0080C8
≈ Blue Aster
Tétrade +90° +180° +270°
- C84B2D
Peanut Butter Jelly
- 678700
≈ Sap Green
- 00889F
≈ Toy Blue
- 915BC7
≈ Morado Purple
Contraste e acessibilidade
Ag
AASobre branco
WCAG 4.66:1 · APCA Lc 72
Ag
AASobre preto
WCAG 4.50:1 · APCA Lc 30
Melhor cor de texto: #FFFFFF
WCAG 4.66:1 (AA) · APCA Lc 72
Contrast pairs
Trechos de código
CSS
:root {
--peanut-butter-jelly: #c84b2d;
--peanut-butter-jelly-rgb: 200 75 45;
--peanut-butter-jelly-oklch: oklch(0.578 0.166 34.7);
}
.element {
color: var(--peanut-butter-jelly);
background-color: hsl(12 63% 48%);
border-color: oklch(0.578 0.166 34.7);
}Tailwind CSS v4
@theme {
--color-peanut-butter-jelly: #c84b2d;
--color-peanut-butter-jelly-50: #ffe5d4;
--color-peanut-butter-jelly-100: #ffd5c1;
--color-peanut-butter-jelly-200: #ffbba2;
--color-peanut-butter-jelly-300: #ff977a;
--color-peanut-butter-jelly-400: #ef7558;
--color-peanut-butter-jelly-500: #de512f;
--color-peanut-butter-jelly-600: #bb462a;
--color-peanut-butter-jelly-700: #963821;
--color-peanut-butter-jelly-800: #702719;
--color-peanut-butter-jelly-900: #4f1a10;
--color-peanut-butter-jelly-950: #340903;
}SCSS
$peanut-butter-jelly: #c84b2d;
$peanut-butter-jelly-rgb: 200, 75, 45;
$peanut-butter-jelly-light: mix(#fff, $peanut-butter-jelly, 20%);
$peanut-butter-jelly-dark: mix(#000, $peanut-butter-jelly, 20%);
.element {
color: $peanut-butter-jelly;
box-shadow: 0 0 0 2px rgba($peanut-butter-jelly, 0.35);
}