Nazwany kolor · #9B7856
Treasure Casket
Treasure Casket to #9B7856: rgb(155 120 86), hsl(30 29% 47%), oklch(0.598 0.065 65.2). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Orange mean? → · Treasure Casket color name →
#9B7856
oklch(0.598 0.065 65.2)
Konwersje koloru
- HEX
- #9b7856
- RGB
- rgb(155 120 86)
- HSL
- hsl(30 29% 47%)
- HWB
- hwb(30 34% 39%)
- OKLCH
- oklch(0.598 0.065 65.2)
- OKLab
- oklab(0.598 0.027 0.059)
- CIE Lab
- lab(53.3 10.74 24.19)
- LCH
- lch(53.3 26.47 66.1)
- CMYK
- cmyk(0% 23% 45% 39%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- A58566
- AF9276
- B99F87
- C3AC97
- CDBAA8
- D7C7B9
- E1D5CA
- EBE3DC
- F5F1ED
Odcienie ciemniejsze
- 86674A
- 72573E
- 5E4832
- 4B3927
- 392A1C
- 281D12
- 181008
- 090502
- 010100
Tony
- 98795B
- 967A5F
- 937B63
- 917C68
- 8E7C6C
- 8B7D70
- 897E74
- 867F78
- 837F7C
Harmonie kolorów
Komplementarna +180°
- 9B7856
Treasure Casket
- 5F84A4
≈ Bluestone Path
Analogowa -30° +30°
- 9B7856
Treasure Casket
- A37265
≈ Toasted Nutmeg
- 8C8052
≈ Fennel Seed
Triada +120° +240°
- 9B7856
Treasure Casket
- 4F8D85
≈ Dusty Teal
- 89769F
≈ Smashed Grape
Komplementarna rozszczepiona +150° +210°
- 9B7856
Treasure Casket
- 4F8A98
≈ Blue Square
- 747DA7
≈ Lavender Violet
Tetrada +90° +180° +270°
- 9B7856
Treasure Casket
- 608C6F
≈ Slate Green
- 5F84A4
≈ Bluestone Path
- 99718F
≈ Felicia
Kontrast i dostępność
Ag
FailNa bieli
WCAG 4.02:1 · APCA Lc 67
Ag
AANa czerni
WCAG 5.21:1 · APCA Lc 34
Najlepszy kolor tekstu: #000000
WCAG 5.21:1 (AA) · APCA Lc 34
Contrast pairs
Fragmenty kodu
CSS
:root {
--treasure-casket: #9b7856;
--treasure-casket-rgb: 155 120 86;
--treasure-casket-oklch: oklch(0.598 0.065 65.2);
}
.element {
color: var(--treasure-casket);
background-color: hsl(30 29% 47%);
border-color: oklch(0.598 0.065 65.2);
}Tailwind CSS v4
@theme {
--color-treasure-casket: #9b7856;
--color-treasure-casket-50: #fff2e2;
--color-treasure-casket-100: #f7e4d2;
--color-treasure-casket-200: #e8d0b7;
--color-treasure-casket-300: #ceb294;
--color-treasure-casket-400: #ba9776;
--color-treasure-casket-500: #a47d57;
--color-treasure-casket-600: #8b6a4b;
--color-treasure-casket-700: #6f553b;
--color-treasure-casket-800: #533e2a;
--color-treasure-casket-900: #3a2a1d;
--color-treasure-casket-950: #24180d;
}SCSS
$treasure-casket: #9b7856;
$treasure-casket-rgb: 155, 120, 86;
$treasure-casket-light: mix(#fff, $treasure-casket, 20%);
$treasure-casket-dark: mix(#000, $treasure-casket, 20%);
.element {
color: $treasure-casket;
box-shadow: 0 0 0 2px rgba($treasure-casket, 0.35);
}