← Back to Editor

#FF3500 · #FFF5A9 · #00354D · #007B7F · #DCB30C

summer

A 5-color summer 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

#FF3500

Vermilion · OrangeRed · Passion Red

HEX
#FF3500
RGB
rgb(255, 53, 0)
HSL
hsl(12, 100%, 50%)
HSB
hsb(12, 100%, 100%)
CMYK
cmyk(0%, 79%, 100%, 0%)
Oklch
oklch(64.8% 0.240 32.9)

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

#FFF5A9

Fresh Green · Wheat · Lemon Cream

HEX
#FFF5A9
RGB
rgb(255, 245, 169)
HSL
hsl(53, 100%, 83%)
HSB
hsb(53, 34%, 100%)
CMYK
cmyk(0%, 4%, 34%, 0%)
Oklch
oklch(96.1% 0.096 101.6)

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

#00354D

Lake Blue · MidnightBlue · Peacock Green

HEX
#00354D
RGB
rgb(0, 53, 77)
HSL
hsl(199, 100%, 15%)
HSB
hsb(199, 100%, 30%)
CMYK
cmyk(100%, 31%, 0%, 70%)
Oklch
oklch(31.1% 0.066 235.3)

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

#007B7F

Lake Blue · Teal · Peacock Green

HEX
#007B7F
RGB
rgb(0, 123, 127)
HSL
hsl(182, 100%, 25%)
HSB
hsb(182, 100%, 50%)
CMYK
cmyk(100%, 3%, 0%, 50%)
Oklch
oklch(52.9% 0.090 198.8)

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

#DCB30C

Ochre · GoldenRod · Honey Gold

HEX
#DCB30C
RGB
rgb(220, 179, 12)
HSL
hsl(48, 90%, 45%)
HSB
hsb(48, 95%, 86%)
CMYK
cmyk(0%, 19%, 95%, 14%)
Oklch
oklch(78.1% 0.158 91.9)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FF3500
00CCFF

Analogous

FF004C
FF3500
FFB300

Triadic

FF3500
00FF33
3300FF

Split-Comp.

FF3500
00FFB3
004CFF

Tetradic

FF3500
4DFF00
00CCFF
B300FF

Contrast Matrix WCAG 2.1 Contrast

FF3500
FFF5A9
00354D
007B7F
DCB30C
—
3.3
AA Large
3.6
AA Large
1.4
Fail
1.8
Fail
3.3
AA Large
—
11.7
AAA
4.6
AA
1.8
Fail
3.6
AA Large
11.7
AAA
—
2.6
Fail
6.5
AA
1.4
Fail
4.6
AA
2.6
Fail
—
2.5
Fail
1.8
Fail
1.8
Fail
6.5
AA
2.5
Fail
—
White BG
3.6AA Large
1.1Fail
13.0AAA
5.1AA
2.0Fail
Black BG
5.8AA
18.9AAA
1.6Fail
4.1AA Large
10.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A8A60D
FBFBBB
171747
35367E
CACA34

Deuteranopia

B3C210
FBFCC0
141046
2E257E
CDD03E

Tritanopia

F51719
FFCACD
034342
067D7D
DA545B

Achromatopsia

6B6B6B
EFEFEF
282828
575757
ACACAC

Shades & Tints Shades & Tints

#FF3500

Dark
Light

#FFF5A9

Dark
Light

#00354D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ff3500;
  --color-2: #fff5a9;
  --color-3: #00354d;
  --color-4: #007b7f;
  --color-5: #dcb30c;
}

SCSS

$color-1: #ff3500;
$color-2: #fff5a9;
$color-3: #00354d;
$color-4: #007b7f;
$color-5: #dcb30c;

TAILWIND

colors: {
  'brand-1': '#ff3500',
  'brand-2': '#fff5a9',
  'brand-3': '#00354d',
  'brand-4': '#007b7f',
  'brand-5': '#dcb30c',
}

RGB Array

[255, 53, 0], [255, 245, 169], [0, 53, 77], [0, 123, 127], [220, 179, 12]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This summer-style palette of #FF3500, #FFF5A9, #00354D, #007B7F, #DCB30C 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: #ff3500; --color-2: #fff5a9; --color-3: #00354d; --color-4: #007b7f; --color-5: #dcb30c. 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 summer-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