← Back to Editor

#1193A1 · #DFC18D · #0C9BA1 · #908864 · #C29156

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#1193A1

Lake Blue · LightSeaGreen · Mint Ice

HEX
#1193A1
RGB
rgb(17, 147, 161)
HSL
hsl(186, 81%, 35%)
HSB
hsb(186, 89%, 63%)
CMYK
cmyk(89%, 9%, 0%, 37%)
Oklch
oklch(60.7% 0.101 207.0)

Traditional「Lake Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#DFC18D

Goose Yellow · BurlyWood · Warm Sun

HEX
#DFC18D
RGB
rgb(223, 193, 141)
HSL
hsl(38, 56%, 71%)
HSB
hsb(38, 37%, 87%)
CMYK
cmyk(0%, 13%, 37%, 13%)
Oklch
oklch(82.4% 0.076 81.0)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

#0C9BA1

Lake Blue · LightSeaGreen · Mint Ice

HEX
#0C9BA1
RGB
rgb(12, 155, 161)
HSL
hsl(182, 86%, 34%)
HSB
hsb(182, 93%, 63%)
CMYK
cmyk(93%, 4%, 0%, 37%)
Oklch
oklch(62.7% 0.105 199.8)

Traditional「Lake Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#908864

Ochre · Gray · Honey Gold

HEX
#908864
RGB
rgb(144, 136, 100)
HSL
hsl(49, 18%, 48%)
HSB
hsb(49, 31%, 56%)
CMYK
cmyk(0%, 6%, 31%, 44%)
Oklch
oklch(62.4% 0.052 97.1)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#C29156

Ginger · DarkSalmon · Warm Sun

HEX
#C29156
RGB
rgb(194, 145, 86)
HSL
hsl(33, 47%, 55%)
HSB
hsb(33, 56%, 76%)
CMYK
cmyk(0%, 25%, 56%, 24%)
Oklch
oklch(69.1% 0.097 70.2)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

1193A1
A21F11

Analogous

11A268
1193A1
114BA2

Triadic

1193A1
A21193
93A211

Split-Comp.

1193A1
A2114B
A26811

Tetradic

1193A1
6811A2
A21F11
4BA211

Contrast Matrix WCAG 2.1 Contrast

1193A1
DFC18D
0C9BA1
908864
C29156
—
2.1
Fail
1.1
Fail
1.0
Fail
1.3
Fail
2.1
Fail
—
2.0
Fail
2.1
Fail
1.6
Fail
1.1
Fail
2.0
Fail
—
1.1
Fail
1.2
Fail
1.0
Fail
2.1
Fail
1.1
Fail
—
1.3
Fail
1.3
Fail
1.6
Fail
1.2
Fail
1.3
Fail
—
White BG
3.7AA Large
1.7Fail
3.4AA Large
3.6AA Large
2.8Fail
Black BG
5.7AA
12.2AAA
6.2AA
5.9AA
7.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

494A9E
D2D29A
4A4BA0
8D8C6D
ADAC64

Deuteranopia

42389D
D4D69D
42379F
8D8E6F
B0B368

Tritanopia

189B9A
DEA4A6
139E9E
907475
C07072

Achromatopsia

6E6E6E
C4C4C4
717171
868686
999999

Shades & Tints Shades & Tints

#1193A1

Dark
Light

#DFC18D

Dark
Light

#0C9BA1

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #1193a1;
  --color-2: #dfc18d;
  --color-3: #0c9ba1;
  --color-4: #908864;
  --color-5: #c29156;
}

SCSS

$color-1: #1193a1;
$color-2: #dfc18d;
$color-3: #0c9ba1;
$color-4: #908864;
$color-5: #c29156;

TAILWIND

colors: {
  'brand-1': '#1193a1',
  'brand-2': '#dfc18d',
  'brand-3': '#0c9ba1',
  'brand-4': '#908864',
  'brand-5': '#c29156',
}

RGB Array

[17, 147, 161], [223, 193, 141], [12, 155, 161], [144, 136, 100], [194, 145, 86]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #1193A1, #DFC18D, #0C9BA1, #908864, #C29156 is ideal for: corporate websites, product showcases, portfolios. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #1193a1; --color-2: #dfc18d; --color-3: #0c9ba1; --color-4: #908864; --color-5: #c29156. LangColor editor supports one-click export to CSS, SCSS, Tailwind, JSON and more. Click the "Export" button to choose your format.

What UI/UX design tips apply to this palette?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. Use the "Contrast Matrix" tool in LangColor editor to check WCAG accessibility levels for every color pair.

Which industries or brands suit this palette?

This general-style 5-color scheme is especially suited for tech, SaaS, healthcare, eco industries. Click "AI Analysis" in the editor for more detailed brand color suggestions.

🎨 Open this palette in Editor →

Generated by LangColor online color tool · Breaking the barrier between language and color