Cor nomeada mais próxima · #C48F6F
#C48F6F
Cor nomeada mais próxima: Baker’s Dream
#C48F6F (rgb(196 143 111), hsl(23 42% 60%), oklch(0.694 0.079 52.1)) é mais próxima da cor nomeada Baker’s Dream. Veja tons claros, sombras, harmonias, contraste WCAG e APCA e código CSS, Tailwind v4 e SCSS.
#C48F6F
oklch(0.694 0.079 52.1)
Conversões de cor
- HEX
- #c48f6f
- RGB
- rgb(196 143 111)
- HSL
- hsl(23 42% 60%)
- HWB
- hwb(23 44% 23%)
- OKLCH
- oklch(0.694 0.079 52.1)
- OKLab
- oklab(0.694 0.048 0.062)
- CIE Lab
- lab(64.11 17.78 25.36)
- LCH
- lch(64.11 30.97 55)
- CMYK
- cmyk(0% 27% 43% 23%)
Tons claros · Sombras · Tons
Tons claros
- CA9A7D
- D0A58B
- D7B099
- DDBBA7
- E3C6B6
- E8D1C4
- EEDDD3
- F4E8E1
- F9F4F0
Sombras
- AA7C60
- 916951
- 785742
- 614534
- 4A3427
- 35241A
- 21150E
- 0E0704
- 020101
Tons
- BD8E71
- B78C73
- B08B75
- A98A77
- A28879
- 9C877A
- 95857C
- 8E837D
- 87827F
Harmonias de cor
Complementar +180°
- C48F6F
Baker’s Dream
- 68A5C5
≈ Scott Base
Análoga -30° +30°
- C48F6F
Baker’s Dream
- C98986
≈ All’s Ace
- B59863
≈ Golden Moss
Tríade +120° +240°
- C48F6F
Baker’s Dream
- 66AD97
≈ Green Crush
- 9D94CA
≈ Distinct Purple
Complementar dividida +150° +210°
- C48F6F
Baker’s Dream
- 5CABB1
≈ Aquarelle
- 829DCE
≈ Caribbean Sky
Tétrade +90° +180° +270°
- C48F6F
Baker’s Dream
- 81A97C
≈ Verdant Haven
- 68A5C5
≈ Scott Base
- B48CBA
≈ Violet Whimsy
Contraste e acessibilidade
Ag
FailSobre branco
WCAG 2.79:1 · APCA Lc 54
Ag
AAASobre preto
WCAG 7.50:1 · APCA Lc 48
Melhor cor de texto: #000000
WCAG 7.50:1 (AAA) · APCA Lc 48
Contrast pairs
Trechos de código
CSS
:root {
--baker-s-dream: #c48f6f;
--baker-s-dream-rgb: 196 143 111;
--baker-s-dream-oklch: oklch(0.694 0.079 52.1);
}
.element {
color: var(--baker-s-dream);
background-color: hsl(23 42% 60%);
border-color: oklch(0.694 0.079 52.1);
}Tailwind CSS v4
@theme {
--color-baker-s-dream: #c48f6f;
--color-baker-s-dream-50: #fff0e1;
--color-baker-s-dream-100: #fee2d0;
--color-baker-s-dream-200: #f0ccb5;
--color-baker-s-dream-300: #d8ad92;
--color-baker-s-dream-400: #c49273;
--color-baker-s-dream-500: #b07754;
--color-baker-s-dream-600: #946548;
--color-baker-s-dream-700: #775139;
--color-baker-s-dream-800: #583a29;
--color-baker-s-dream-900: #3e281c;
--color-baker-s-dream-950: #27160c;
}SCSS
$baker-s-dream: #c48f6f;
$baker-s-dream-rgb: 196, 143, 111;
$baker-s-dream-light: mix(#fff, $baker-s-dream, 20%);
$baker-s-dream-dark: mix(#000, $baker-s-dream, 20%);
.element {
color: $baker-s-dream;
box-shadow: 0 0 0 2px rgba($baker-s-dream, 0.35);
}