Cor nomeada · #F7DDAA
Dumpling
Dumpling é #F7DDAA: rgb(247 221 170), hsl(40 83% 82%), oklch(0.907 0.072 84). Veja tons claros, sombras, harmonias, contraste WCAG e APCA e código CSS, Tailwind v4 e SCSS.
What does Orange mean? → · Dumpling color name →
#F7DDAA
oklch(0.907 0.072 84)
Conversões de cor
- HEX
- #f7ddaa
- RGB
- rgb(247 221 170)
- HSL
- hsl(40 83% 82%)
- HWB
- hwb(40 67% 3%)
- OKLCH
- oklch(0.907 0.072 84)
- OKLab
- oklab(0.907 0.008 0.071)
- CIE Lab
- lab(89.38 3.88 28.57)
- LCH
- lch(89.38 28.84 82.3)
- CMYK
- cmyk(0% 11% 31% 3%)
Tons claros · Sombras · Tons
Tons claros
- F8E0B3
- F9E4BB
- FAE7C4
- FAEBCD
- FBEED5
- FCF2DD
- FDF5E6
- FDF8EE
- FEFCF7
Sombras
- D7C093
- B7A47D
- 998868
- 7C6E53
- 60553F
- 453D2D
- 2C261B
- 15110B
- 030201
Tons
- EBD3A6
- DECAA2
- D2C09E
- C6B79A
- BAAE96
- AEA491
- A29B8D
- 979289
- 8B8984
Harmonias de cor
Complementar +180°
- F7DDAA
Dumpling
- D1E1FF
≈ Arc Light
Análoga -30° +30°
- F7DDAA
Dumpling
- FFD7BE
≈ Sun-Kissed Peach
- DFE6B0
≈ Bit of Lime
Tríade +120° +240°
- F7DDAA
Dumpling
- A7EFF6
≈ Mint Macaron
- F9D1FC
≈ Pink Diamond
Complementar dividida +150° +210°
- F7DDAA
Dumpling
- BEE7FF
≈ Blue Java Banana
- E1DBFF
≈ Transparent Blue
Tétrade +90° +180° +270°
- F7DDAA
Dumpling
- AEF0DD
≈ Mint Tea
- D1E1FF
≈ Arc Light
- FFD2E3
≈ Poplar Pink
Contraste e acessibilidade
Ag
FailSobre branco
WCAG 1.32:1 · APCA Lc 16
Ag
AAASobre preto
WCAG 15.87:1 · APCA Lc 88
Melhor cor de texto: #000000
WCAG 15.87:1 (AAA) · APCA Lc 88
Contrast pairs
Trechos de código
CSS
:root {
--dumpling: #f7ddaa;
--dumpling-rgb: 247 221 170;
--dumpling-oklch: oklch(0.907 0.072 84);
}
.element {
color: var(--dumpling);
background-color: hsl(40 83% 82%);
border-color: oklch(0.907 0.072 84);
}Tailwind CSS v4
@theme {
--color-dumpling: #f7ddaa;
--color-dumpling-50: #fef4de;
--color-dumpling-100: #f3e7cd;
--color-dumpling-200: #e2d3b2;
--color-dumpling-300: #c8b58e;
--color-dumpling-400: #b39b6d;
--color-dumpling-500: #9d824c;
--color-dumpling-600: #846e41;
--color-dumpling-700: #6a5834;
--color-dumpling-800: #4f4024;
--color-dumpling-900: #372c18;
--color-dumpling-950: #221909;
}SCSS
$dumpling: #f7ddaa;
$dumpling-rgb: 247, 221, 170;
$dumpling-light: mix(#fff, $dumpling, 20%);
$dumpling-dark: mix(#000, $dumpling, 20%);
.element {
color: $dumpling;
box-shadow: 0 0 0 2px rgba($dumpling, 0.35);
}