← Back to Editor

#232F49 · #F1F2EA · #FF0D27 · #2AB8B9 · #11779D

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

#232F49

Indigo · DarkSlateGray · Prussian Blue

HEX
#232F49
RGB
rgb(35, 47, 73)
HSL
hsl(221, 35%, 21%)
HSB
hsb(221, 52%, 29%)
CMYK
cmyk(52%, 36%, 0%, 71%)
Oklch
oklch(30.7% 0.050 264.7)

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

#F1F2EA

Fresh Green · Linen · Lemon Cream

HEX
#F1F2EA
RGB
rgb(241, 242, 234)
HSL
hsl(67, 24%, 93%)
HSB
hsb(67, 3%, 95%)
CMYK
cmyk(0%, 0%, 3%, 5%)
Oklch
oklch(95.8% 0.011 112.4)

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

#FF0D27

Vermilion · Red · Passion Red

HEX
#FF0D27
RGB
rgb(255, 13, 39)
HSL
hsl(354, 100%, 53%)
HSB
hsb(354, 95%, 100%)
CMYK
cmyk(0%, 95%, 85%, 0%)
Oklch
oklch(63.2% 0.253 26.1)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

#2AB8B9

Lake Blue · LightSeaGreen · Mint Ice

HEX
#2AB8B9
RGB
rgb(42, 184, 185)
HSL
hsl(180, 63%, 45%)
HSB
hsb(180, 77%, 73%)
CMYK
cmyk(77%, 1%, 0%, 27%)
Oklch
oklch(71.3% 0.113 195.6)

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

#11779D

Lake Blue · Teal · Mint Ice

HEX
#11779D
RGB
rgb(17, 119, 157)
HSL
hsl(196, 80%, 34%)
HSB
hsb(196, 89%, 62%)
CMYK
cmyk(89%, 24%, 0%, 38%)
Oklch
oklch(53.4% 0.103 230.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

232F49
483C23

Analogous

234148
232F49
2A2348

Triadic

232F49
48232F
2F4823

Split-Comp.

232F49
482A23
414823

Tetradic

232F49
482341
483C23
23482A

Contrast Matrix WCAG 2.1 Contrast

232F49
F1F2EA
FF0D27
2AB8B9
11779D
—
11.8
AAA
3.4
AA Large
5.5
AA
2.6
Fail
11.8
AAA
—
3.5
AA Large
2.2
Fail
4.5
AA Large
3.4
AA Large
3.5
AA Large
—
1.6
Fail
1.3
Fail
5.5
AA
2.2
Fail
1.6
Fail
—
2.1
Fail
2.6
Fail
4.5
AA Large
1.3
Fail
2.1
Fail
—
White BG
13.3AAA
1.1Fail
3.9AA Large
2.4Fail
5.1AA
Black BG
1.6Fail
18.6AAA
5.3AA
8.7AAA
4.1AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

282843
F1F1EC
969421
6769B9
3D3E94

Deuteranopia

282741
F1F1EC
A4B61F
5F55B9
373092

Tritanopia

243E3D
F1EDEE
F31C1B
31B9B9
168D8B

Achromatopsia

2E2E2E
F1F1F1
585858
8E8E8E
5D5D5D

Shades & Tints Shades & Tints

#232F49

Dark
Light

#F1F2EA

Dark
Light

#FF0D27

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #232f49;
  --color-2: #f1f2ea;
  --color-3: #ff0d27;
  --color-4: #2ab8b9;
  --color-5: #11779d;
}

SCSS

$color-1: #232f49;
$color-2: #f1f2ea;
$color-3: #ff0d27;
$color-4: #2ab8b9;
$color-5: #11779d;

TAILWIND

colors: {
  'brand-1': '#232f49',
  'brand-2': '#f1f2ea',
  'brand-3': '#ff0d27',
  'brand-4': '#2ab8b9',
  'brand-5': '#11779d',
}

RGB Array

[35, 47, 73], [241, 242, 234], [255, 13, 39], [42, 184, 185], [17, 119, 157]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #232F49, #F1F2EA, #FF0D27, #2AB8B9, #11779D 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: #232f49; --color-2: #f1f2ea; --color-3: #ff0d27; --color-4: #2ab8b9; --color-5: #11779d. 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