← Back to Editor

#B3764C · #F3924F · #F0B53B · #F2DA6D · #F7E987

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarm

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial App

Color Details Color Details

#B3764C

Tangerine · Sienna · Amber Brown

HEX
#B3764C
RGB
rgb(179, 118, 76)
HSL
hsl(24, 40%, 50%)
HSB
hsb(24, 58%, 70%)
CMYK
cmyk(0%, 34%, 58%, 30%)
Oklch
oklch(62.1% 0.096 54.5)

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

#F3924F

Apricot · Coral · Warm Sun

HEX
#F3924F
RGB
rgb(243, 146, 79)
HSL
hsl(25, 87%, 63%)
HSB
hsb(25, 67%, 95%)
CMYK
cmyk(0%, 40%, 67%, 5%)
Oklch
oklch(74.9% 0.143 53.3)

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

#F0B53B

Ginger · GoldenRod · Sunflower

HEX
#F0B53B
RGB
rgb(240, 181, 59)
HSL
hsl(40, 86%, 59%)
HSB
hsb(40, 75%, 94%)
CMYK
cmyk(0%, 25%, 75%, 6%)
Oklch
oklch(80.7% 0.148 81.3)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#F2DA6D

Ginger · Khaki · Sunflower

HEX
#F2DA6D
RGB
rgb(242, 218, 109)
HSL
hsl(49, 84%, 69%)
HSB
hsb(49, 55%, 95%)
CMYK
cmyk(0%, 10%, 55%, 5%)
Oklch
oklch(88.7% 0.132 97.1)

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

#F7E987

Fresh Green · Khaki · Sunflower

HEX
#F7E987
RGB
rgb(247, 233, 135)
HSL
hsl(52, 88%, 75%)
HSB
hsb(52, 45%, 97%)
CMYK
cmyk(0%, 6%, 45%, 3%)
Oklch
oklch(92.5% 0.120 101.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B3764C
4D8AB3

Analogous

B34D57
B3764C
B3A84D

Triadic

B3764C
4DB375
754DB3

Split-Comp.

B3764C
4DB3A8
4D57B3

Tetradic

B3764C
57B34D
4D8AB3
A84DB3

Contrast Matrix WCAG 2.1 Contrast

B3764C
F3924F
F0B53B
F2DA6D
F7E987
—
1.6
Fail
2.0
Fail
2.7
Fail
3.0
AA Large
1.6
Fail
—
1.3
Fail
1.7
Fail
1.9
Fail
2.0
Fail
1.3
Fail
—
1.3
Fail
1.5
Fail
2.7
Fail
1.7
Fail
1.3
Fail
—
1.1
Fail
3.0
AA Large
1.9
Fail
1.5
Fail
1.1
Fail
—
White BG
3.7AA Large
2.3Fail
1.8Fail
1.4Fail
1.2Fail
Black BG
5.6AA
9.0AAA
11.4AAA
15.0AAA
17.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

999856
C9C85F
D6D659
E8E787
F1F19F

Deuteranopia

9CA159
CFD663
DADE60
E9EB8E
F2F3A4

Tritanopia

B05E60
EE6C6F
ED7075
F19CA1
F6B1B6

Achromatopsia

838383
A7A7A7
B9B9B9
D5D5D5
E2E2E2

Shades & Tints Shades & Tints

#B3764C

Dark
Light

#F3924F

Dark
Light

#F0B53B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b3764c;
  --color-2: #f3924f;
  --color-3: #f0b53b;
  --color-4: #f2da6d;
  --color-5: #f7e987;
}

SCSS

$color-1: #b3764c;
$color-2: #f3924f;
$color-3: #f0b53b;
$color-4: #f2da6d;
$color-5: #f7e987;

TAILWIND

colors: {
  'brand-1': '#b3764c',
  'brand-2': '#f3924f',
  'brand-3': '#f0b53b',
  'brand-4': '#f2da6d',
  'brand-5': '#f7e987',
}

RGB Array

[179, 118, 76], [243, 146, 79], [240, 181, 59], [242, 218, 109], [247, 233, 135]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B3764C, #F3924F, #F0B53B, #F2DA6D, #F7E987 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: #b3764c; --color-2: #f3924f; --color-3: #f0b53b; --color-4: #f2da6d; --color-5: #f7e987. 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 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