Blue & Orange Complementary Palette
Dynamic · Energetic · Confident
A complementary colour scheme combining cool blues with warm oranges. Complementary pairs sit opposite each other on the colour wheel, creating maximum contrast and visual tension — energetic and dynamic.
| Swatch | Name | Hex |
|---|---|---|
| Blue Light | #EFF6FF | |
| Blue Primary | #3B82F6 | |
| Blue Dark | #1E3A8A | |
| Orange Light | #FFF7ED | |
| Orange Primary | #F97316 | |
| Orange Dark | #9A3412 |
Best For
Use blue as the dominant colour (70%) and orange as the accent (30%). Orange CTAs on blue headers create instant visual hierarchy. Avoid equal blue/orange splits — the contrast becomes overwhelming.
CSS Custom Properties
:root {
--comp-100: #EFF6FF;
--comp-200: #3B82F6;
--comp-300: #1E3A8A;
--comp-400: #FFF7ED;
--comp-500: #F97316;
--comp-600: #9A3412;
}Tailwind CSS Config
// tailwind.config.ts
export default {
theme: {
extend: {
colors: {
"comp": {
"100": "#EFF6FF",
"200": "#3B82F6",
"300": "#1E3A8A",
"400": "#FFF7ED",
"500": "#F97316",
"600": "#9A3412",
},
},
},
},
}Generate a custom palette
Enter any seed colour and generate complementary, analogous, triadic, and monochromatic palettes. Export as CSS variables, Tailwind config, or JSON.
Open Color Palette GeneratorFrequently Asked Questions
What hex codes are in the Blue & Orange Complementary Palette?
The Blue & Orange Complementary Palette includes: Blue Light (#EFF6FF), Blue Primary (#3B82F6), Blue Dark (#1E3A8A), Orange Light (#FFF7ED), Orange Primary (#F97316), Orange Dark (#9A3412).
What is the mood of the Blue & Orange Complementary Palette?
Blue & Orange Complementary Palette evokes: Dynamic · Energetic · Confident. A complementary colour scheme combining cool blues with warm oranges. Complementary pairs sit opposite each other on the colour wheel, creating maximum contrast and visual tension — energetic and dynamic.
What industries use the Blue & Orange Complementary Palette?
The Blue & Orange Complementary Palette is popular in: Sports, Technology, Media, Retail. Use blue as the dominant colour (70%) and orange as the accent (30%). Orange CTAs on blue headers create instant visual hierarchy. Avoid equal blue/orange splits — the contrast becomes overwhelming.
What colours pair well with this palette?
This palette pairs well with: white, light-gray. Use blue as the dominant colour (70%) and orange as the accent (30%). Orange CTAs on blue headers create instant visual hierarchy. Avoid equal blue/orange splits — the contrast becomes overwhelming.