Cor nomeada · #CDA366
Workbench
Workbench é #CDA366: rgb(205 163 102), hsl(36 51% 60%), oklch(0.741 0.093 75.8). Veja tons claros, sombras, harmonias, contraste WCAG e APCA e código CSS, Tailwind v4 e SCSS.
What does Orange mean? → · Workbench color name →
#CDA366
oklch(0.741 0.093 75.8)
Conversões de cor
- HEX
- #cda366
- RGB
- rgb(205 163 102)
- HSL
- hsl(36 51% 60%)
- HWB
- hwb(36 40% 20%)
- OKLCH
- oklch(0.741 0.093 75.8)
- OKLab
- oklab(0.741 0.023 0.09)
- CIE Lab
- lab(69.93 10.52 37.71)
- LCH
- lch(69.93 39.15 74.4)
- CMYK
- cmyk(0% 20% 50% 20%)
Tons claros · Sombras · Tons
Tons claros
- D2AC76
- D7B585
- DCBE95
- E1C8A4
- E6D1B3
- EBDAC2
- F0E3D1
- F5ECE0
- FAF6F0
Sombras
- B28D58
- 98784A
- 7E633C
- 664F2F
- 4E3C23
- 382A17
- 23190C
- 0F0A04
- 020100
Tons
- C5A06A
- BD9C6D
- B69970
- AE9573
- A69276
- 9E8E78
- 978B7A
- 8F877C
- 88847E
Harmonias de cor
Complementar +180°
- CDA366
Workbench
- 84AEE5
≈ Queer Blue
Análoga -30° +30°
- CDA366
Workbench
- DC9979
≈ Totally Toffee
- B3AF68
≈ Summer Moss
Tríade +120° +240°
- CDA366
Workbench
- 5ABDBE
≈ Pharaoh’s Seas
- C299D3
≈ Mauve Mist
Complementar dividida +150° +210°
- CDA366
Workbench
- 65B7D8
≈ Baby Tears
- A5A3E4
≈ Simply Violet
Tétrade +90° +180° +270°
Contraste e acessibilidade
Ag
FailSobre branco
WCAG 2.32:1 · APCA Lc 46
Ag
AAASobre preto
WCAG 9.02:1 · APCA Lc 56
Melhor cor de texto: #000000
WCAG 9.02:1 (AAA) · APCA Lc 56
Contrast pairs
Trechos de código
CSS
:root {
--workbench: #cda366;
--workbench-rgb: 205 163 102;
--workbench-oklch: oklch(0.741 0.093 75.8);
}
.element {
color: var(--workbench);
background-color: hsl(36 51% 60%);
border-color: oklch(0.741 0.093 75.8);
}Tailwind CSS v4
@theme {
--color-workbench: #cda366;
--color-workbench-50: #fff3d8;
--color-workbench-100: #f9e5c6;
--color-workbench-200: #ebd0a8;
--color-workbench-300: #d2b281;
--color-workbench-400: #be975e;
--color-workbench-500: #a97d37;
--color-workbench-600: #8f6a30;
--color-workbench-700: #735526;
--color-workbench-800: #563d1a;
--color-workbench-900: #3c2a11;
--color-workbench-950: #251704;
}SCSS
$workbench: #cda366;
$workbench-rgb: 205, 163, 102;
$workbench-light: mix(#fff, $workbench, 20%);
$workbench-dark: mix(#000, $workbench, 20%);
.element {
color: $workbench;
box-shadow: 0 0 0 2px rgba($workbench, 0.35);
}