← Back to Editor

#369EA2 · #BAE4E5 · #361707 · #E6AC6C · #FFEFCA

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#369EA2

Slate Blue · LightSeaGreen · Mint Ice

HEX
#369EA2
RGB
rgb(54, 158, 162)
HSL
hsl(182, 50%, 42%)
HSB
hsb(182, 67%, 64%)
CMYK
cmyk(67%, 2%, 0%, 36%)
Oklch
oklch(64.2% 0.093 198.8)

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

#BAE4E5

Sky Blue · LightBlue · Glacier Blue

HEX
#BAE4E5
RGB
rgb(186, 228, 229)
HSL
hsl(181, 45%, 81%)
HSB
hsb(181, 19%, 90%)
CMYK
cmyk(19%, 0%, 0%, 10%)
Oklch
oklch(88.9% 0.044 198.2)

Traditional「Sky Blue」· Paint「Glacier Blue」· Creative Arctic Pool

#361707

Tangerine · Black · Cinnamon

HEX
#361707
RGB
rgb(54, 23, 7)
HSL
hsl(20, 77%, 12%)
HSB
hsb(20, 87%, 21%)
CMYK
cmyk(0%, 57%, 87%, 79%)
Oklch
oklch(24.7% 0.056 46.2)

Traditional「Tangerine」· Paint「Cinnamon」· Creative Blush Sunrise

#E6AC6C

Ginger · SandyBrown · Warm Sun

HEX
#E6AC6C
RGB
rgb(230, 172, 108)
HSL
hsl(31, 71%, 66%)
HSB
hsb(31, 53%, 90%)
CMYK
cmyk(0%, 25%, 53%, 10%)
Oklch
oklch(78.5% 0.106 68.0)

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

#FFEFCA

Goose Yellow · Bisque · Lemon Cream

HEX
#FFEFCA
RGB
rgb(255, 239, 202)
HSL
hsl(42, 100%, 90%)
HSB
hsb(42, 21%, 100%)
CMYK
cmyk(0%, 6%, 21%, 0%)
Oklch
oklch(95.6% 0.051 87.4)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

369EA2
A13936

Analogous

36A16F
369EA2
3668A1

Triadic

369EA2
A1369D
9DA136

Split-Comp.

369EA2
A13668
A16F36

Tetradic

369EA2
6F36A1
A13936
68A136

Contrast Matrix WCAG 2.1 Contrast

369EA2
BAE4E5
361707
E6AC6C
FFEFCA
—
2.3
Fail
5.1
AA
1.6
Fail
2.8
Fail
2.3
Fail
—
11.9
AAA
1.5
Fail
1.2
Fail
5.1
AA
11.9
AAA
—
8.2
AAA
14.4
AAA
1.6
Fail
1.5
Fail
8.2
AAA
—
1.8
Fail
2.8
Fail
1.2
Fail
14.4
AAA
1.8
Fail
—
White BG
3.2AA Large
1.4Fail
16.4AAA
2.0Fail
1.1Fail
Black BG
6.6AA
15.3AAA
1.3Fail
10.5AAA
18.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

6364A1
CCCDE5
29280B
CDCC7B
F8F8D3

Deuteranopia

5D55A1
CAC7E5
2A2D0C
D0D57F
F9FAD5

Tritanopia

3BA0A0
BCE5E5
340E0F
E3888A
FEDADC

Achromatopsia

7F7F7F
D8D8D8
1E1E1E
B6B6B6
F0F0F0

Shades & Tints Shades & Tints

#369EA2

Dark
Light

#BAE4E5

Dark
Light

#361707

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #369ea2;
  --color-2: #bae4e5;
  --color-3: #361707;
  --color-4: #e6ac6c;
  --color-5: #ffefca;
}

SCSS

$color-1: #369ea2;
$color-2: #bae4e5;
$color-3: #361707;
$color-4: #e6ac6c;
$color-5: #ffefca;

TAILWIND

colors: {
  'brand-1': '#369ea2',
  'brand-2': '#bae4e5',
  'brand-3': '#361707',
  'brand-4': '#e6ac6c',
  'brand-5': '#ffefca',
}

RGB Array

[54, 158, 162], [186, 228, 229], [54, 23, 7], [230, 172, 108], [255, 239, 202]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #369EA2, #BAE4E5, #361707, #E6AC6C, #FFEFCA is ideal for: social media posters, mobile apps, e-commerce promos, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #369ea2; --color-2: #bae4e5; --color-3: #361707; --color-4: #e6ac6c; --color-5: #ffefca. 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 general-style 5-color scheme is especially suited for food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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