#FF691A + #706F6A + #323443 + #4D3847 + #B02305 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#FF691A

Tangerine · OrangeRed · Warm Sun

HEX

#FF691A

RGB

rgb(255, 105, 26)

HSL

hsl(21, 100%, 55%)

HSB

hsb(21, 90%, 100%)

CMYK

cmyk(0%, 59%, 90%, 0%)

Oklch

oklch(70.0% 0.199 42.7)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#706F6A

Ink Gray · DimGray · Warm Gray

HEX

#706F6A

RGB

rgb(112, 111, 106)

HSL

hsl(50, 3%, 43%)

HSB

hsb(50, 5%, 44%)

CMYK

cmyk(0%, 1%, 5%, 56%)

Oklch

oklch(54.1% 0.008 97.4)

Traditional「Ink Gray」· Paint「Warm Gray」· Creative Urban Concrete

#323443

Indigo · DarkSlateGray · Prussian Blue

HEX

#323443

RGB

rgb(50, 52, 67)

HSL

hsl(233, 15%, 23%)

HSB

hsb(233, 25%, 26%)

CMYK

cmyk(25%, 22%, 0%, 74%)

Oklch

oklch(32.9% 0.027 278.9)

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

#4D3847

Rose Purple · DarkSlateGray · Eggplant

HEX

#4D3847

RGB

rgb(77, 56, 71)

HSL

hsl(317, 16%, 26%)

HSB

hsb(317, 27%, 30%)

CMYK

cmyk(0%, 27%, 8%, 70%)

Oklch

oklch(37.0% 0.038 337.1)

Traditional「Rose Purple」· Paint「Eggplant」· Creative Blush Sunrise

#B02305

Vermilion · FireBrick · Wine Red

HEX

#B02305

RGB

rgb(176, 35, 5)

HSL

hsl(11, 94%, 35%)

HSB

hsb(11, 97%, 69%)

CMYK

cmyk(0%, 80%, 97%, 31%)

Oklch

oklch(49.2% 0.180 32.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FF691A

1AAFFF

Analogous

FF1A3C

FF691A

FFDD1A

Triadic

FF691A

1AFF6A

6A1AFF

Split-Comp.

FF691A

1AFFDD

1A3CFF

Tetradic

FF691A

3CFF1A

1AAFFF

DD1AFF

Contrast Matrix WCAG 2.1 Contrast

FF691A	706F6A	323443	4D3847	B02305
—	1.7 Fail	4.3 AA Large	3.7 AA Large	2.4 Fail
1.7 Fail	—	2.4 Fail	2.1 Fail	1.4 Fail
4.3 AA Large	2.4 Fail	—	1.2 Fail	1.8 Fail
3.7 AA Large	2.1 Fail	1.2 Fail	—	1.6 Fail
2.4 Fail	1.4 Fail	1.8 Fail	1.6 Fail	—

White BG

2.9Fail

5.0AA

12.3AAA

10.6AAA

6.8AA

Black BG

7.3AAA

4.2AA Large

1.7Fail

2.0Fail

3.1AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

BEBD2D

70706B

33333F

444443

73720C

Deuteranopia

C7D232

70706B

33333F

454743

7B860E

Tritanopia

F83C40

706C6C

323D3C

4C4140

A91213

Achromatopsia

8D8D8D

6F6F6F

353535

404040

4A4A4A

Shades & Tints Shades & Tints

#FF691A

Dark

Light

#706F6A

Dark

Light

#323443

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ff691a;
  --color-2: #706f6a;
  --color-3: #323443;
  --color-4: #4d3847;
  --color-5: #b02305;
}

SCSS

$color-1: #ff691a;
$color-2: #706f6a;
$color-3: #323443;
$color-4: #4d3847;
$color-5: #b02305;

TAILWIND

colors: {
  'brand-1': '#ff691a',
  'brand-2': '#706f6a',
  'brand-3': '#323443',
  'brand-4': '#4d3847',
  'brand-5': '#b02305',
}

RGB Array

[255, 105, 26], [112, 111, 106], [50, 52, 67], [77, 56, 71], [176, 35, 5]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FF691A, #706F6A, #323443, #4D3847, #B02305 is ideal for: tech websites, dark mode UIs, game UIs. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #ff691a; --color-2: #706f6a; --color-3: #323443; --color-4: #4d3847; --color-5: #b02305. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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 tech, SaaS, healthcare, eco industries. 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