Nazwany kolor · #967859
Cocoa Cupcake
Cocoa Cupcake to #967859: rgb(150 120 89), hsl(30 26% 47%), oklch(0.594 0.058 67.3). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Orange mean? → · Cocoa Cupcake color name →
#967859
oklch(0.594 0.058 67.3)
Konwersje koloru
- HEX
- #967859
- RGB
- rgb(150 120 89)
- HSL
- hsl(30 26% 47%)
- HWB
- hwb(30 35% 41%)
- OKLCH
- oklch(0.594 0.058 67.3)
- OKLab
- oklab(0.594 0.022 0.053)
- CIE Lab
- lab(52.79 8.83 21.71)
- LCH
- lch(52.79 23.44 67.9)
- CMYK
- cmyk(0% 20% 41% 41%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- A08569
- AB9279
- B59F89
- BFAC99
- CABAA9
- D4C7BA
- DFD5CB
- EAE3DC
- F4F1ED
Odcienie ciemniejsze
- 82674C
- 6E5740
- 5B4834
- 493928
- 372A1D
- 261D13
- 161009
- 080503
- 010100
Tony
- 94795D
- 927A61
- 907B65
- 8E7B69
- 8B7C6D
- 897D71
- 877E75
- 857F79
- 827F7C
Harmonie kolorów
Komplementarna +180°
- 967859
Cocoa Cupcake
- 6282A0
≈ Bluestone Path
Analogowa -30° +30°
- 967859
Cocoa Cupcake
- 9D7366
≈ Kurumizome Brown
- 887F57
≈ Clay Creek
Triada +120° +240°
- 967859
Cocoa Cupcake
- 548A84
≈ Evora
- 87759A
≈ Voxatron Purple
Komplementarna rozszczepiona +150° +210°
- 967859
Cocoa Cupcake
- 558795
≈ Night Masque
- 757CA1
≈ Inky Violet
Tetrada +90° +180° +270°
- 967859
Cocoa Cupcake
- 618971
≈ Dark Jade
- 6282A0
≈ Bluestone Path
- 95718B
≈ Very Grape
Kontrast i dostępność
Ag
FailNa bieli
WCAG 4.09:1 · APCA Lc 68
Ag
AANa czerni
WCAG 5.12:1 · APCA Lc 34
Najlepszy kolor tekstu: #000000
WCAG 5.12:1 (AA) · APCA Lc 34
Contrast pairs
Fragmenty kodu
CSS
:root {
--cocoa-cupcake: #967859;
--cocoa-cupcake-rgb: 150 120 89;
--cocoa-cupcake-oklch: oklch(0.594 0.058 67.3);
}
.element {
color: var(--cocoa-cupcake);
background-color: hsl(30 26% 47%);
border-color: oklch(0.594 0.058 67.3);
}Tailwind CSS v4
@theme {
--color-cocoa-cupcake: #967859;
--color-cocoa-cupcake-50: #fff3e4;
--color-cocoa-cupcake-100: #f5e5d4;
--color-cocoa-cupcake-200: #e5d0ba;
--color-cocoa-cupcake-300: #cbb398;
--color-cocoa-cupcake-400: #b6987a;
--color-cocoa-cupcake-500: #a07f5c;
--color-cocoa-cupcake-600: #886c4f;
--color-cocoa-cupcake-700: #6d563f;
--color-cocoa-cupcake-800: #503e2d;
--color-cocoa-cupcake-900: #382b1e;
--color-cocoa-cupcake-950: #23180e;
}SCSS
$cocoa-cupcake: #967859;
$cocoa-cupcake-rgb: 150, 120, 89;
$cocoa-cupcake-light: mix(#fff, $cocoa-cupcake, 20%);
$cocoa-cupcake-dark: mix(#000, $cocoa-cupcake, 20%);
.element {
color: $cocoa-cupcake;
box-shadow: 0 0 0 2px rgba($cocoa-cupcake, 0.35);
}