Cor nomeada · #D4823C
Clay Terrace
Clay Terrace é #D4823C: rgb(212 130 60), hsl(28 64% 53%), oklch(0.681 0.131 58.1). Veja tons claros, sombras, harmonias, contraste WCAG e APCA e código CSS, Tailwind v4 e SCSS.
What does Orange mean? → · Clay Terrace color name →
#D4823C
oklch(0.681 0.131 58.1)
Conversões de cor
- HEX
- #d4823c
- RGB
- rgb(212 130 60)
- HSL
- hsl(28 64% 53%)
- HWB
- hwb(28 24% 17%)
- OKLCH
- oklch(0.681 0.131 58.1)
- OKLab
- oklab(0.681 0.069 0.112)
- CIE Lab
- lab(62.44 28.3 50.35)
- LCH
- lch(62.44 57.76 60.7)
- CMYK
- cmyk(0% 39% 72% 17%)
Tons claros · Sombras · Tons
Tons claros
- D98F53
- DE9B67
- E3A87B
- E8B48E
- ECC1A1
- F0CDB4
- F4DAC6
- F8E6D9
- FCF3EC
Sombras
- B87033
- 9D5F2A
- 834E21
- 693E19
- 512F11
- 3A200A
- 241204
- 100601
- 020100
Tons
- CC8246
- C4834F
- BC8357
- B3835E
- AB8364
- A3826B
- 9A8270
- 928176
- 89817B
Harmonias de cor
Complementar +180°
- D4823C
Clay Terrace
- 36A3E0
≈ Dayflower
Análoga -30° +30°
- D4823C
Clay Terrace
- DE766A
≈ Mettwurst
- BA931E
≈ Nugget
Tríade +120° +240°
- D4823C
Clay Terrace
- 00B199
≈ Pool Green
- A385DF
≈ Lavender Blossom
Complementar dividida +150° +210°
- D4823C
Clay Terrace
- 00ACBE
≈ Bahaman Sea
- 7694EA
≈ Guilliman Blue
Tétrade +90° +180° +270°
- D4823C
Clay Terrace
- 59AF69
≈ Algae
- 36A3E0
≈ Dayflower
- C47AC1
≈ Gulābī Pink
Contraste e acessibilidade
Ag
FailSobre branco
WCAG 2.97:1 · APCA Lc 56
Ag
AAASobre preto
WCAG 7.05:1 · APCA Lc 46
Melhor cor de texto: #000000
WCAG 7.05:1 (AAA) · APCA Lc 46
Contrast pairs
Trechos de código
CSS
:root {
--clay-terrace: #d4823c;
--clay-terrace-rgb: 212 130 60;
--clay-terrace-oklch: oklch(0.681 0.131 58.1);
}
.element {
color: var(--clay-terrace);
background-color: hsl(28 64% 53%);
border-color: oklch(0.681 0.131 58.1);
}Tailwind CSS v4
@theme {
--color-clay-terrace: #d4823c;
--color-clay-terrace-50: #ffedd0;
--color-clay-terrace-100: #ffdebc;
--color-clay-terrace-200: #ffc89b;
--color-clay-terrace-300: #e9a771;
--color-clay-terrace-400: #d88949;
--color-clay-terrace-500: #c56c0d;
--color-clay-terrace-600: #a65c12;
--color-clay-terrace-700: #85490f;
--color-clay-terrace-800: #64340a;
--color-clay-terrace-900: #462407;
--color-clay-terrace-950: #2d1200;
}SCSS
$clay-terrace: #d4823c;
$clay-terrace-rgb: 212, 130, 60;
$clay-terrace-light: mix(#fff, $clay-terrace, 20%);
$clay-terrace-dark: mix(#000, $clay-terrace, 20%);
.element {
color: $clay-terrace;
box-shadow: 0 0 0 2px rgba($clay-terrace, 0.35);
}