← Back to Editor

#0F335D · #135D85 · #50BDA9 · #CEE49F · #F7F887

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#0F335D

Indigo · MidnightBlue · Prussian Blue

HEX
#0F335D
RGB
rgb(15, 51, 93)
HSL
hsl(212, 72%, 21%)
HSB
hsb(212, 84%, 36%)
CMYK
cmyk(84%, 45%, 0%, 64%)
Oklch
oklch(32.0% 0.085 254.7)

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

#135D85

Lake Blue · Teal · Prussian Blue

HEX
#135D85
RGB
rgb(19, 93, 133)
HSL
hsl(201, 75%, 30%)
HSB
hsb(201, 86%, 52%)
CMYK
cmyk(86%, 30%, 0%, 48%)
Oklch
oklch(45.6% 0.094 238.7)

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

#50BDA9

Mineral Blue · MediumAquaMarine · Lake Green

HEX
#50BDA9
RGB
rgb(80, 189, 169)
HSL
hsl(169, 45%, 53%)
HSB
hsb(169, 58%, 74%)
CMYK
cmyk(58%, 0%, 11%, 26%)
Oklch
oklch(73.0% 0.104 179.2)

Traditional「Mineral Blue」· Paint「Lake Green」· Creative Blush Sunrise

#CEE49F

Willow Green · Khaki · Apple Green

HEX
#CEE49F
RGB
rgb(206, 228, 159)
HSL
hsl(79, 56%, 76%)
HSB
hsb(79, 30%, 89%)
CMYK
cmyk(10%, 0%, 30%, 11%)
Oklch
oklch(88.6% 0.093 122.7)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

#F7F887

Fresh Green · Khaki · Sunflower

HEX
#F7F887
RGB
rgb(247, 248, 135)
HSL
hsl(61, 89%, 75%)
HSB
hsb(61, 46%, 97%)
CMYK
cmyk(0%, 0%, 46%, 3%)
Oklch
oklch(95.5% 0.136 109.2)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

0F335D
5C380F

Analogous

0F5A5C
0F335D
120F5C

Triadic

0F335D
5C0F33
335C0F

Split-Comp.

0F335D
5C120F
5A5C0F

Tetradic

0F335D
5C0F5A
5C380F
0F5C12

Contrast Matrix WCAG 2.1 Contrast

0F335D
135D85
50BDA9
CEE49F
F7F887
—
1.8
Fail
5.6
AA
9.2
AAA
11.3
AAA
1.8
Fail
—
3.1
AA Large
5.2
AA
6.4
AA
5.6
AA
3.1
AA Large
—
1.7
Fail
2.0
Fail
9.2
AAA
5.2
AA
1.7
Fail
—
1.2
Fail
11.3
AAA
6.4
AA
2.0
Fail
1.2
Fail
—
White BG
12.7AAA
7.2AAA
2.3Fail
1.4Fail
1.1Fail
Black BG
1.7Fail
2.9Fail
9.2AAA
15.2AAA
18.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

1F1F53
33347B
7F80AE
D8D8B0
F7F7A2

Deuteranopia

1D1A50
2F2979
7971AF
D6D5B4
F7F7A9

Tritanopia

114B49
177472
55B2B3
CFBDC0
F7B8BD

Achromatopsia

2D2D2D
4B4B4B
9A9A9A
D6D6D6
EBEBEB

Shades & Tints Shades & Tints

#0F335D

Dark
Light

#135D85

Dark
Light

#50BDA9

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #0f335d;
  --color-2: #135d85;
  --color-3: #50bda9;
  --color-4: #cee49f;
  --color-5: #f7f887;
}

SCSS

$color-1: #0f335d;
$color-2: #135d85;
$color-3: #50bda9;
$color-4: #cee49f;
$color-5: #f7f887;

TAILWIND

colors: {
  'brand-1': '#0f335d',
  'brand-2': '#135d85',
  'brand-3': '#50bda9',
  'brand-4': '#cee49f',
  'brand-5': '#f7f887',
}

RGB Array

[15, 51, 93], [19, 93, 133], [80, 189, 169], [206, 228, 159], [247, 248, 135]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #0F335D, #135D85, #50BDA9, #CEE49F, #F7F887 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: #0f335d; --color-2: #135d85; --color-3: #50bda9; --color-4: #cee49f; --color-5: #f7f887. 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