← Back to Editor

#006699 · #FFA34F · #D1D7DC · #DD6900 · #5493B4

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

#006699

Lake Blue · Teal · Prussian Blue

HEX
#006699
RGB
rgb(0, 102, 153)
HSL
hsl(200, 100%, 30%)
HSB
hsb(200, 100%, 60%)
CMYK
cmyk(100%, 33%, 0%, 40%)
Oklch
oklch(48.7% 0.113 240.8)

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

#FFA34F

Apricot · SandyBrown · Warm Sun

HEX
#FFA34F
RGB
rgb(255, 163, 79)
HSL
hsl(29, 100%, 65%)
HSB
hsb(29, 69%, 100%)
CMYK
cmyk(0%, 36%, 69%, 0%)
Oklch
oklch(79.3% 0.147 60.3)

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

#D1D7DC

Sky Blue · LightGray · Sky Blue

HEX
#D1D7DC
RGB
rgb(209, 215, 220)
HSL
hsl(207, 14%, 84%)
HSB
hsb(207, 5%, 86%)
CMYK
cmyk(5%, 2%, 0%, 14%)
Oklch
oklch(87.6% 0.010 242.9)

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

#DD6900

Tangerine · Chocolate · Amber Brown

HEX
#DD6900
RGB
rgb(221, 105, 0)
HSL
hsl(29, 100%, 43%)
HSB
hsb(29, 100%, 87%)
CMYK
cmyk(0%, 52%, 100%, 13%)
Oklch
oklch(64.9% 0.170 50.6)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

#5493B4

Slate Blue · SteelBlue · Navy Blue

HEX
#5493B4
RGB
rgb(84, 147, 180)
HSL
hsl(201, 39%, 52%)
HSB
hsb(201, 53%, 71%)
CMYK
cmyk(53%, 18%, 0%, 29%)
Oklch
oklch(63.4% 0.082 232.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

006699
993300

Analogous

009980
006699
001999

Triadic

006699
990066
669900

Split-Comp.

006699
99001A
997F00

Tetradic

006699
7F0099
993300
1A9900

Contrast Matrix WCAG 2.1 Contrast

006699
FFA34F
D1D7DC
DD6900
5493B4
—
3.2
AA Large
4.3
AA Large
1.8
Fail
1.8
Fail
3.2
AA Large
—
1.4
Fail
1.7
Fail
1.7
Fail
4.3
AA Large
1.4
Fail
—
2.4
Fail
2.3
Fail
1.8
Fail
1.7
Fail
2.4
Fail
—
1.0
Fail
1.8
Fail
1.7
Fail
2.3
Fail
1.0
Fail
—
White BG
6.2AA
2.0Fail
1.5Fail
3.4AA Large
3.4AA Large
Black BG
3.4AA Large
10.6AAA
14.5AAA
6.1AA
6.2AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

2C2D8D
D7D663
D4D4DB
ABAA19
6F70AC

Deuteranopia

261F8A
DDE368
D3D3DB
B2BA20
6C67AA

Tritanopia

058381
FA7377
D1DADA
D72D32
57A6A4

Achromatopsia

4D4D4D
B5B5B5
D6D6D6
808080
848484

Shades & Tints Shades & Tints

#006699

Dark
Light

#FFA34F

Dark
Light

#D1D7DC

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #006699;
  --color-2: #ffa34f;
  --color-3: #d1d7dc;
  --color-4: #dd6900;
  --color-5: #5493b4;
}

SCSS

$color-1: #006699;
$color-2: #ffa34f;
$color-3: #d1d7dc;
$color-4: #dd6900;
$color-5: #5493b4;

TAILWIND

colors: {
  'brand-1': '#006699',
  'brand-2': '#ffa34f',
  'brand-3': '#d1d7dc',
  'brand-4': '#dd6900',
  'brand-5': '#5493b4',
}

RGB Array

[0, 102, 153], [255, 163, 79], [209, 215, 220], [221, 105, 0], [84, 147, 180]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #006699, #FFA34F, #D1D7DC, #DD6900, #5493B4 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: #006699; --color-2: #ffa34f; --color-3: #d1d7dc; --color-4: #dd6900; --color-5: #5493b4. 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