← Back to Editor

#F59362 · #FF5500 · #FFFFFF · #45CDFF · #2D6D85

nature

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

VibrantFreshWarmCool

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Landing PageMobile AppData Visualization

Color Details Color Details

#F59362

Apricot · SandyBrown · Warm Sun

HEX
#F59362
RGB
rgb(245, 147, 98)
HSL
hsl(20, 88%, 67%)
HSB
hsb(20, 60%, 96%)
CMYK
cmyk(0%, 40%, 60%, 4%)
Oklch
oklch(75.6% 0.135 46.6)

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

#FF5500

Tangerine · OrangeRed · Amber Brown

HEX
#FF5500
RGB
rgb(255, 85, 0)
HSL
hsl(20, 100%, 50%)
HSB
hsb(20, 100%, 100%)
CMYK
cmyk(0%, 67%, 100%, 0%)
Oklch
oklch(67.6% 0.217 38.8)

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

#FFFFFF

Moonlight White · White · Cloud White

HEX
#FFFFFF
RGB
rgb(255, 255, 255)
HSL
hsl(0, 0%, 100%)
HSB
hsb(0, 0%, 100%)
CMYK
cmyk(0%, 0%, 0%, 0%)
Oklch
oklch(100.0% 0.000 89.9)

Traditional「Moonlight White」· Paint「Cloud White」· Creative Morning Mist

#45CDFF

Sky Blue · Turquoise · Lake Green

HEX
#45CDFF
RGB
rgb(69, 205, 255)
HSL
hsl(196, 100%, 64%)
HSB
hsb(196, 73%, 100%)
CMYK
cmyk(73%, 20%, 0%, 0%)
Oklch
oklch(79.6% 0.134 227.1)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#2D6D85

Slate Blue · Teal · Mint Ice

HEX
#2D6D85
RGB
rgb(45, 109, 133)
HSL
hsl(196, 49%, 35%)
HSB
hsb(196, 66%, 52%)
CMYK
cmyk(66%, 18%, 0%, 48%)
Oklch
oklch(50.4% 0.075 226.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F59362
61C4F5

Analogous

F56179
F59362
F5DC61

Triadic

F59362
61F592
9261F5

Split-Comp.

F59362
61F5DC
6179F5

Tetradic

F59362
79F561
61C4F5
DC61F5

Contrast Matrix WCAG 2.1 Contrast

F59362
FF5500
FFFFFF
45CDFF
2D6D85
—
1.4
Fail
2.3
Fail
1.2
Fail
2.5
Fail
1.4
Fail
—
3.2
AA Large
1.7
Fail
1.8
Fail
2.3
Fail
3.2
AA Large
—
1.8
Fail
5.8
AA
1.2
Fail
1.7
Fail
1.8
Fail
—
3.1
AA Large
2.5
Fail
1.8
Fail
5.8
AA
3.1
AA Large
—
White BG
2.3Fail
3.2AA Large
1.0Fail
1.8Fail
5.8AA
Black BG
9.2AAA
6.6AA
21.0AAA
11.4AAA
3.6AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

CBCA6E
B5B415
FFFFFF
8081F3
49497F

Deuteranopia

D0D871
BFCC1A
FFFFFF
786EF0
45407E

Tritanopia

F07779
F72528
FFFFFF
4CE9E7
307B7A

Achromatopsia

ABABAB
7E7E7E
FFFFFF
AAAAAA
5D5D5D

Shades & Tints Shades & Tints

#F59362

Dark
Light

#FF5500

Dark
Light

#FFFFFF

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f59362;
  --color-2: #ff5500;
  --color-3: #ffffff;
  --color-4: #45cdff;
  --color-5: #2d6d85;
}

SCSS

$color-1: #f59362;
$color-2: #ff5500;
$color-3: #ffffff;
$color-4: #45cdff;
$color-5: #2d6d85;

TAILWIND

colors: {
  'brand-1': '#f59362',
  'brand-2': '#ff5500',
  'brand-3': '#ffffff',
  'brand-4': '#45cdff',
  'brand-5': '#2d6d85',
}

RGB Array

[245, 147, 98], [255, 85, 0], [255, 255, 255], [69, 205, 255], [45, 109, 133]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #F59362, #FF5500, #FFFFFF, #45CDFF, #2D6D85 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: #f59362; --color-2: #ff5500; --color-3: #ffffff; --color-4: #45cdff; --color-5: #2d6d85. 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 nature-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