Named color · #C3A285
Pacific Bluffs
Pacific Bluffs is #C3A285: rgb(195 162 133), hsl(28 34% 64%), oklch(0.734 0.056 63.1). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Orange mean? → · Pacific Bluffs color name →
#C3A285
oklch(0.734 0.056 63.1)
Color conversions
- HEX
- #c3a285
- RGB
- rgb(195 162 133)
- HSL
- hsl(28 34% 64%)
- HWB
- hwb(28 52% 24%)
- OKLCH
- oklch(0.734 0.056 63.1)
- OKLab
- oklab(0.734 0.025 0.05)
- CIE Lab
- lab(69.09 9.43 19.92)
- LCH
- lch(69.09 22.04 64.7)
- CMYK
- cmyk(0% 17% 32% 24%)
Tints · Shades · Tones
Tints
- C9AB91
- CFB49D
- D5BDA9
- DBC7B5
- E1D0C1
- E7D9CD
- EDE3DA
- F3ECE6
- F9F5F2
Shades
- A98C73
- 907761
- 786350
- 604F40
- 4A3C30
- 342A21
- 201913
- 0E0A06
- 020101
Tones
- BC9F85
- B59B84
- AF9884
- A89484
- A19183
- 9B8E83
- 948A82
- 8D8781
- 878381
Color harmonies
Complementary +180°
- C3A285
Pacific Bluffs
- 8BAECA
≈ Windy Day
Analogous -30° +30°
- C3A285
Pacific Bluffs
- CA9D93
≈ Adobe Glow
- B5A981
≈ Barbados Beige
Triadic +120° +240°
- C3A285
Pacific Bluffs
- 81B5AC
≈ Melodious
- B0A1C7
≈ Berry Frappé
Split-complementary +150° +210°
- C3A285
Pacific Bluffs
- 80B3BE
≈ Culinary Blue
- 9DA7CD
≈ Bright Bluebell
Tetradic +90° +180° +270°
- C3A285
Pacific Bluffs
- 8FB499
≈ Liebermann Green
- 8BAECA
≈ Windy Day
- BF9CB8
≈ Tuileries Tint
Contrast & accessibility
Ag
FailOn white
WCAG 2.37:1 · APCA Lc 47
Ag
AAAOn black
WCAG 8.82:1 · APCA Lc 55
Best text color: #000000
WCAG 8.82:1 (AAA) · APCA Lc 55
Contrast pairs
Code snippets
CSS
:root {
--pacific-bluffs: #c3a285;
--pacific-bluffs-rgb: 195 162 133;
--pacific-bluffs-oklch: oklch(0.734 0.056 63.1);
}
.element {
color: var(--pacific-bluffs);
background-color: hsl(28 34% 64%);
border-color: oklch(0.734 0.056 63.1);
}Tailwind CSS v4
@theme {
--color-pacific-bluffs: #c3a285;
--color-pacific-bluffs-50: #fff2e5;
--color-pacific-bluffs-100: #f6e5d5;
--color-pacific-bluffs-200: #e6d0bc;
--color-pacific-bluffs-300: #ccb29a;
--color-pacific-bluffs-400: #b7987d;
--color-pacific-bluffs-500: #a17e5f;
--color-pacific-bluffs-600: #886b51;
--color-pacific-bluffs-700: #6d5641;
--color-pacific-bluffs-800: #513e2e;
--color-pacific-bluffs-900: #382b1f;
--color-pacific-bluffs-950: #23180f;
}SCSS
$pacific-bluffs: #c3a285;
$pacific-bluffs-rgb: 195, 162, 133;
$pacific-bluffs-light: mix(#fff, $pacific-bluffs, 20%);
$pacific-bluffs-dark: mix(#000, $pacific-bluffs, 20%);
.element {
color: $pacific-bluffs;
box-shadow: 0 0 0 2px rgba($pacific-bluffs, 0.35);
}