Nazwany kolor · #CC9944
Camel Cardinal
Camel Cardinal to #CC9944: rgb(204 153 68), hsl(37 57% 53%), oklch(0.715 0.118 77.5). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Orange mean? → · Camel Cardinal color name →
#CC9944
oklch(0.715 0.118 77.5)
Konwersje koloru
- HEX
- #cc9944
- RGB
- rgb(204 153 68)
- HSL
- hsl(37 57% 53%)
- HWB
- hwb(37 27% 20%)
- OKLCH
- oklch(0.715 0.118 77.5)
- OKLab
- oklab(0.715 0.026 0.115)
- CIE Lab
- lab(66.99 13.38 50.98)
- LCH
- lch(66.99 52.7 75.3)
- CMYK
- cmyk(0% 25% 67% 20%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- D1A35A
- D7AD6E
- DCB881
- E1C293
- E6CCA5
- EBD6B7
- F0E0C9
- F5EBDB
- FAF5ED
Odcienie ciemniejsze
- B1843A
- 977030
- 7E5D26
- 654A1D
- 4E3814
- 37270C
- 221705
- 0F0802
- 020100
Tony
- C4974D
- BD9555
- B5925C
- AE9063
- A68D68
- 9E8B6E
- 978873
- 8F8677
- 88837C
Harmonie kolorów
Komplementarna +180°
- CC9944
Camel Cardinal
- 73A5EC
≈ Greek Sea
Analogowa -30° +30°
- CC9944
Camel Cardinal
- DF8B60
≈ Copper Tan
- ABA849
≈ Olive Reserve
Triada +120° +240°
- CC9944
Camel Cardinal
- 19B9BD
≈ Caicos Turquoise
- C28BD4
≈ Purception
Komplementarna rozszczepiona +150° +210°
- CC9944
Camel Cardinal
- 3FB1DD
≈ Summer Sky
- 9F97E9
≈ Dull Lavender
Tetrada +90° +180° +270°
- CC9944
Camel Cardinal
- 49BB94
≈ Expressionism Green
- 73A5EC
≈ Greek Sea
- D984B1
≈ Middle Purple
Kontrast i dostępność
Ag
FailNa bieli
WCAG 2.55:1 · APCA Lc 50
Ag
AAANa czerni
WCAG 8.20:1 · APCA Lc 52
Najlepszy kolor tekstu: #000000
WCAG 8.20:1 (AAA) · APCA Lc 52
Contrast pairs
Fragmenty kodu
CSS
:root {
--camel-cardinal: #cc9944;
--camel-cardinal-rgb: 204 153 68;
--camel-cardinal-oklch: oklch(0.715 0.118 77.5);
}
.element {
color: var(--camel-cardinal);
background-color: hsl(37 57% 53%);
border-color: oklch(0.715 0.118 77.5);
}Tailwind CSS v4
@theme {
--color-camel-cardinal: #cc9944;
--color-camel-cardinal-50: #fff2d0;
--color-camel-cardinal-100: #fde4bc;
--color-camel-cardinal-200: #efcf9b;
--color-camel-cardinal-300: #d8b170;
--color-camel-cardinal-400: #c59546;
--color-camel-cardinal-500: #b17a00;
--color-camel-cardinal-600: #956808;
--color-camel-cardinal-700: #785309;
--color-camel-cardinal-800: #5a3c05;
--color-camel-cardinal-900: #3f2904;
--color-camel-cardinal-950: #281600;
}SCSS
$camel-cardinal: #cc9944;
$camel-cardinal-rgb: 204, 153, 68;
$camel-cardinal-light: mix(#fff, $camel-cardinal, 20%);
$camel-cardinal-dark: mix(#000, $camel-cardinal, 20%);
.element {
color: $camel-cardinal;
box-shadow: 0 0 0 2px rgba($camel-cardinal, 0.35);
}