← Back to Editor

#2F6F99 · #F84A4A · #F87B4A · #F8A14A · #F8CF4A

bright

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial App

Color Details Color Details

#2F6F99

Lake Blue · SteelBlue · Prussian Blue

HEX
#2F6F99
RGB
rgb(47, 111, 153)
HSL
hsl(204, 53%, 39%)
HSB
hsb(204, 69%, 60%)
CMYK
cmyk(69%, 27%, 0%, 40%)
Oklch
oklch(52.0% 0.093 240.7)

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

#F84A4A

Peach Pink · Tomato · Coral Red

HEX
#F84A4A
RGB
rgb(248, 74, 74)
HSL
hsl(0, 93%, 63%)
HSB
hsb(0, 70%, 97%)
CMYK
cmyk(0%, 70%, 70%, 3%)
Oklch
oklch(65.8% 0.211 25.1)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#F87B4A

Apricot · Coral · Warm Sun

HEX
#F87B4A
RGB
rgb(248, 123, 74)
HSL
hsl(17, 93%, 63%)
HSB
hsb(17, 70%, 97%)
CMYK
cmyk(0%, 50%, 70%, 3%)
Oklch
oklch(71.9% 0.166 41.2)

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

#F8A14A

Ginger · SandyBrown · Warm Sun

HEX
#F8A14A
RGB
rgb(248, 161, 74)
HSL
hsl(30, 93%, 63%)
HSB
hsb(30, 70%, 97%)
CMYK
cmyk(0%, 35%, 70%, 3%)
Oklch
oklch(78.1% 0.144 62.6)

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

#F8CF4A

Ginger · SandyBrown · Sunflower

HEX
#F8CF4A
RGB
rgb(248, 207, 74)
HSL
hsl(46, 93%, 63%)
HSB
hsb(46, 70%, 97%)
CMYK
cmyk(0%, 17%, 70%, 3%)
Oklch
oklch(86.7% 0.152 91.4)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

2F6F99
98592F

Analogous

2F988E
2F6F99
2F3998

Triadic

2F6F99
982F6E
6E982F

Split-Comp.

2F6F99
982F39
988E2F

Tetradic

2F6F99
8E2F98
98592F
39982F

Contrast Matrix WCAG 2.1 Contrast

2F6F99
F84A4A
F87B4A
F8A14A
F8CF4A
—
1.6
Fail
2.1
Fail
2.6
Fail
3.6
AA Large
1.6
Fail
—
1.3
Fail
1.7
Fail
2.3
Fail
2.1
Fail
1.3
Fail
—
1.3
Fail
1.8
Fail
2.6
Fail
1.7
Fail
1.3
Fail
—
1.4
Fail
3.6
AA Large
2.3
Fail
1.8
Fail
1.4
Fail
—
White BG
5.4AA
3.5AA Large
2.7Fail
2.1Fail
1.5Fail
Black BG
3.9AA Large
6.1AA
7.9AAA
10.2AAA
14.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

4B4B8F
ADAB4A
C2C156
D2D25F
E6E66A

Deuteranopia

47428C
B7C44A
C9D359
D7DE64
E9EC72

Tritanopia

328785
EF4A4A
F25F61
F47073
F68489

Achromatopsia

616161
7E7E7E
9B9B9B
B1B1B1
CCCCCC

Shades & Tints Shades & Tints

#2F6F99

Dark
Light

#F84A4A

Dark
Light

#F87B4A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #2f6f99;
  --color-2: #f84a4a;
  --color-3: #f87b4a;
  --color-4: #f8a14a;
  --color-5: #f8cf4a;
}

SCSS

$color-1: #2f6f99;
$color-2: #f84a4a;
$color-3: #f87b4a;
$color-4: #f8a14a;
$color-5: #f8cf4a;

TAILWIND

colors: {
  'brand-1': '#2f6f99',
  'brand-2': '#f84a4a',
  'brand-3': '#f87b4a',
  'brand-4': '#f8a14a',
  'brand-5': '#f8cf4a',
}

RGB Array

[47, 111, 153], [248, 74, 74], [248, 123, 74], [248, 161, 74], [248, 207, 74]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This bright-style palette of #2F6F99, #F84A4A, #F87B4A, #F8A14A, #F8CF4A is ideal for: social media posters, mobile apps, e-commerce promos. Vivid colors effectively attract user attention. 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: #2f6f99; --color-2: #f84a4a; --color-3: #f87b4a; --color-4: #f8a14a; --color-5: #f8cf4a. 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. 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 bright-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