← Back to Editor

#364D63 · #6892AD · #9FB6C7 · #F0DBD5 · #5F821F

minimal

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

RestrainedProfessionalPureWarmCool

Industry INDUSTRY

ArchitectureManufacturingSaaS B2B

UI Context UI CONTEXT

Corporate SitePortfolioAdmin PanelData Visualization

Color Details Color Details

#364D63

Slate Blue · DarkSlateGray · Prussian Blue

HEX
#364D63
RGB
rgb(54, 77, 99)
HSL
hsl(209, 29%, 30%)
HSB
hsb(209, 45%, 39%)
CMYK
cmyk(45%, 22%, 0%, 61%)
Oklch
oklch(41.1% 0.047 247.9)

Traditional「Slate Blue」· Paint「Prussian Blue」· Creative Blush Sunrise

#6892AD

Slate Blue · CadetBlue · Navy Blue

HEX
#6892AD
RGB
rgb(104, 146, 173)
HSL
hsl(203, 30%, 54%)
HSB
hsb(203, 40%, 68%)
CMYK
cmyk(40%, 16%, 0%, 32%)
Oklch
oklch(63.9% 0.061 237.2)

Traditional「Slate Blue」· Paint「Navy Blue」· Creative Blush Sunrise

#9FB6C7

Sky Blue · LightSteelBlue · Cobalt Blue

HEX
#9FB6C7
RGB
rgb(159, 182, 199)
HSL
hsl(206, 26%, 70%)
HSB
hsb(206, 20%, 78%)
CMYK
cmyk(20%, 9%, 0%, 22%)
Oklch
oklch(76.4% 0.035 240.0)

Traditional「Sky Blue」· Paint「Cobalt Blue」· Creative Twilight Haze

#F0DBD5

Peach Pink · Bisque · Cherry Blossom

HEX
#F0DBD5
RGB
rgb(240, 219, 213)
HSL
hsl(13, 47%, 89%)
HSB
hsb(13, 11%, 94%)
CMYK
cmyk(0%, 9%, 11%, 6%)
Oklch
oklch(90.7% 0.025 36.5)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

#5F821F

Grass Green · DarkOliveGreen · Forest Green

HEX
#5F821F
RGB
rgb(95, 130, 31)
HSL
hsl(81, 61%, 32%)
HSB
hsb(81, 76%, 51%)
CMYK
cmyk(27%, 0%, 76%, 49%)
Oklch
oklch(56.0% 0.130 127.4)

Traditional「Grass Green」· Paint「Forest Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

364D63
634C36

Analogous

366362
364D63
363763

Triadic

364D63
63364D
4D6336

Split-Comp.

364D63
633637
636236

Tetradic

364D63
623663
634C36
376336

Contrast Matrix WCAG 2.1 Contrast

364D63
6892AD
9FB6C7
F0DBD5
5F821F
—
2.6
Fail
4.2
AA Large
6.6
AA
2.0
Fail
2.6
Fail
—
1.6
Fail
2.5
Fail
1.3
Fail
4.2
AA Large
1.6
Fail
—
1.6
Fail
2.1
Fail
6.6
AA
2.5
Fail
1.6
Fail
—
3.4
AA Large
2.0
Fail
1.3
Fail
2.1
Fail
3.4
AA Large
—
White BG
8.8AAA
3.3AA Large
2.1Fail
1.3Fail
4.5AA Large
Black BG
2.4Fail
6.3AA
10.0AAA
15.8AAA
4.7AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

40405E
7A7BA6
A9A9C3
E7E7D6
6E6E37

Deuteranopia

3F3D5C
7875A5
A8A6C2
E8EAD7
6C6A3D

Tritanopia

375959
6AA1A0
A0C0BF
EFD8D8
614A4E

Achromatopsia

494949
898989
B1B1B1
E1E1E1
6C6C6C

Shades & Tints Shades & Tints

#364D63

Dark
Light

#6892AD

Dark
Light

#9FB6C7

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #364d63;
  --color-2: #6892ad;
  --color-3: #9fb6c7;
  --color-4: #f0dbd5;
  --color-5: #5f821f;
}

SCSS

$color-1: #364d63;
$color-2: #6892ad;
$color-3: #9fb6c7;
$color-4: #f0dbd5;
$color-5: #5f821f;

TAILWIND

colors: {
  'brand-1': '#364d63',
  'brand-2': '#6892ad',
  'brand-3': '#9fb6c7',
  'brand-4': '#f0dbd5',
  'brand-5': '#5f821f',
}

RGB Array

[54, 77, 99], [104, 146, 173], [159, 182, 199], [240, 219, 213], [95, 130, 31]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This minimal-style palette of #364D63, #6892AD, #9FB6C7, #F0DBD5, #5F821F 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: #364d63; --color-2: #6892ad; --color-3: #9fb6c7; --color-4: #f0dbd5; --color-5: #5f821f. 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 minimal-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