← Back to Editor

#FF9900 · #CE9033 · #968069 · #605A6B · #1F172E

cool

A 5-color cool 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

#FF9900

Ochre · Orange · Amber Brown

HEX
#FF9900
RGB
rgb(255, 153, 0)
HSL
hsl(36, 100%, 50%)
HSB
hsb(36, 100%, 100%)
CMYK
cmyk(0%, 40%, 100%, 0%)
Oklch
oklch(77.2% 0.174 64.6)

TraditionalOchre」· PaintAmber Brown」· Creative Blush Sunrise

#CE9033

Ochre · GoldenRod · Amber Brown

HEX
#CE9033
RGB
rgb(206, 144, 51)
HSL
hsl(36, 61%, 50%)
HSB
hsb(36, 75%, 81%)
CMYK
cmyk(0%, 30%, 75%, 19%)
Oklch
oklch(69.9% 0.129 73.1)

TraditionalOchre」· PaintAmber Brown」· Creative Blush Sunrise

#968069

Ochre · Gray · Amber Brown

HEX
#968069
RGB
rgb(150, 128, 105)
HSL
hsl(31, 18%, 50%)
HSB
hsb(31, 30%, 59%)
CMYK
cmyk(0%, 15%, 30%, 41%)
Oklch
oklch(61.4% 0.043 68.1)

TraditionalOchre」· PaintAmber Brown」· Creative Blush Sunrise

#605A6B

Deep Indigo · DimGray · Charcoal

HEX
#605A6B
RGB
rgb(96, 90, 107)
HSL
hsl(261, 9%, 39%)
HSB
hsb(261, 16%, 42%)
CMYK
cmyk(10%, 16%, 0%, 58%)
Oklch
oklch(47.9% 0.028 301.4)

TraditionalDeep Indigo」· PaintCharcoal」· Creative Midnight Shadow

#1F172E

Deep Indigo · Black · Dark Purple

HEX
#1F172E
RGB
rgb(31, 23, 46)
HSL
hsl(261, 33%, 14%)
HSB
hsb(261, 50%, 18%)
CMYK
cmyk(33%, 50%, 0%, 82%)
Oklch
oklch(22.7% 0.045 298.8)

TraditionalDeep Indigo」· PaintDark Purple」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FF9900
0066FF

Analogous

FF1900
FF9900
E5FF00

Triadic

FF9900
00FF99
9900FF

Split-Comp.

FF9900
00E6FF
1900FF

Tetradic

FF9900
00FF19
0066FF
FF00E6

Contrast Matrix WCAG 2.1 Contrast

FF9900
CE9033
968069
605A6B
1F172E
1.3
Fail
1.8
Fail
3.1
AA Large
8.0
AAA
1.3
Fail
1.4
Fail
2.4
Fail
6.3
AA
1.8
Fail
1.4
Fail
1.8
Fail
4.6
AA
3.1
AA Large
2.4
Fail
1.8
Fail
2.6
Fail
8.0
AAA
6.3
AA
4.6
AA
2.6
Fail
White BG
2.1Fail
2.7Fail
3.8AA Large
6.6AA
17.2AAA
Black BG
9.8AAA
7.7AAA
5.6AA
3.2AA Large
1.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

D3D225
B3B34A
8C8C6F
5D5D67
1C1B28

Deuteranopia

D9E02E
B7BB4F
8E8F70
5E5E66
1C1D27

Tritanopia

FA4249
CB5B5F
957374
606463
1F2423

Achromatopsia

A6A6A6
989898
848484
5E5E5E
1C1C1C

Shades & Tints Shades & Tints

#FF9900

Dark
Light

#CE9033

Dark
Light

#968069

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ff9900;
  --color-2: #ce9033;
  --color-3: #968069;
  --color-4: #605a6b;
  --color-5: #1f172e;
}

SCSS

$color-1: #ff9900;
$color-2: #ce9033;
$color-3: #968069;
$color-4: #605a6b;
$color-5: #1f172e;

TAILWIND

colors: {
  'brand-1': '#ff9900',
  'brand-2': '#ce9033',
  'brand-3': '#968069',
  'brand-4': '#605a6b',
  'brand-5': '#1f172e',
}

RGB Array

[255, 153, 0], [206, 144, 51], [150, 128, 105], [96, 90, 107], [31, 23, 46]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #FF9900, #CE9033, #968069, #605A6B, #1F172E 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: #ff9900; --color-2: #ce9033; --color-3: #968069; --color-4: #605a6b; --color-5: #1f172e. 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 cool-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