← Back to Editor

#233645 · #3C5F65 · #36344C · #F98258 · #FFE9D5

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 LibraryData Visualization

Color Details Color Details

#233645

Slate Blue · DarkSlateGray · Deep Sea Blue

HEX
#233645
RGB
rgb(35, 54, 69)
HSL
hsl(206, 33%, 20%)
HSB
hsb(206, 49%, 27%)
CMYK
cmyk(49%, 22%, 0%, 73%)
Oklch
oklch(32.3% 0.036 243.0)

Traditional「Slate Blue」· Paint「Deep Sea Blue」· Creative Blush Sunrise

#3C5F65

Slate Blue · DarkSlateGray · Mint Ice

HEX
#3C5F65
RGB
rgb(60, 95, 101)
HSL
hsl(189, 25%, 32%)
HSB
hsb(189, 41%, 40%)
CMYK
cmyk(41%, 6%, 0%, 60%)
Oklch
oklch(46.1% 0.041 209.4)

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

#36344C

Deep Indigo · DarkSlateGray · Prussian Blue

HEX
#36344C
RGB
rgb(54, 52, 76)
HSL
hsl(245, 19%, 25%)
HSB
hsb(245, 32%, 30%)
CMYK
cmyk(29%, 32%, 0%, 70%)
Oklch
oklch(33.8% 0.042 287.8)

Traditional「Deep Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

#F98258

Apricot · Coral · Warm Sun

HEX
#F98258
RGB
rgb(249, 130, 88)
HSL
hsl(16, 93%, 66%)
HSB
hsb(16, 65%, 98%)
CMYK
cmyk(0%, 48%, 65%, 2%)
Oklch
oklch(73.3% 0.156 39.8)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#FFE9D5

Apricot · Beige · Peach Orange

HEX
#FFE9D5
RGB
rgb(255, 233, 213)
HSL
hsl(29, 100%, 92%)
HSB
hsb(29, 16%, 100%)
CMYK
cmyk(0%, 9%, 16%, 0%)
Oklch
oklch(94.6% 0.036 64.7)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

233645
443122

Analogous

224442
233645
222444

Triadic

233645
442235
354422

Split-Comp.

233645
442224
444222

Tetradic

233645
422244
443122
244422

Contrast Matrix WCAG 2.1 Contrast

233645
3C5F65
36344C
F98258
FFE9D5
—
1.8
Fail
1.0
Fail
5.0
AA
10.6
AAA
1.8
Fail
—
1.7
Fail
2.8
Fail
5.9
AA
1.0
Fail
1.7
Fail
—
4.8
AA
10.2
AAA
5.0
AA
2.8
Fail
4.8
AA
—
2.1
Fail
10.6
AAA
5.9
AA
10.2
AAA
2.1
Fail
—
White BG
12.5AAA
7.0AA
12.0AAA
2.5Fail
1.2Fail
Black BG
1.7Fail
3.0AA Large
1.8Fail
8.4AAA
17.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

2B2B41
4B4B64
353546
C5C462
F5F5DA

Deuteranopia

2A2941
494763
353545
CCD565
F7F8DB

Tritanopia

243F3E
3E6262
364241
F36A6C
FEDEDF

Achromatopsia

323232
555555
373737
A1A1A1
EDEDED

Shades & Tints Shades & Tints

#233645

Dark
Light

#3C5F65

Dark
Light

#36344C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #233645;
  --color-2: #3c5f65;
  --color-3: #36344c;
  --color-4: #f98258;
  --color-5: #ffe9d5;
}

SCSS

$color-1: #233645;
$color-2: #3c5f65;
$color-3: #36344c;
$color-4: #f98258;
$color-5: #ffe9d5;

TAILWIND

colors: {
  'brand-1': '#233645',
  'brand-2': '#3c5f65',
  'brand-3': '#36344c',
  'brand-4': '#f98258',
  'brand-5': '#ffe9d5',
}

RGB Array

[35, 54, 69], [60, 95, 101], [54, 52, 76], [249, 130, 88], [255, 233, 213]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #233645, #3C5F65, #36344C, #F98258, #FFE9D5 is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #233645; --color-2: #3c5f65; --color-3: #36344c; --color-4: #f98258; --color-5: #ffe9d5. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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