Color Combinations
48 two-color combinations that are known to work, grouped by mood. Every pair shows both hex codes, the RGB and HSL values, how much contrast the two colors produce and a five-color set built from them — so you can drop the whole thing into CSS.
Everyday neutrals
Black, white, navy and grey — the base layer almost every interface is built on.
Black and White
#000000 · #FFFFFFMaximum clarityOpen combinationBlack and Gold
#000000 · #FFD700Luxury contrastOpen combinationNavy and White
#000080 · #FFFFFFCorporate and calmOpen combinationGray and White
#808080 · #FFFFFFQuiet structureOpen combinationBlack and Beige
#000000 · #F5F5DCWarm minimalismOpen combinationCharcoal and Cream
#36454F · #FFFDD0Softened neutralOpen combinationNavy and Gray
#000080 · #808080Layered neutralsOpen combinationWhite and Gold
#FFFFFF · #FFD700Festive eleganceOpen combinationWarm combinations
Reds, oranges and terracottas, usually with something cooler to keep them in check.
Red and Yellow
#FF0000 · #FFFF00Loud and appetisingOpen combinationOrange and Teal
#FFA500 · #008080Cinematic contrastOpen combinationCoral and Mint
#FF7F50 · #98FF98Fresh and friendlyOpen combinationTerracotta and Cream
#E2725B · #FFFDD0Handmade warmthOpen combinationRed and Black
#FF0000 · #000000Bold and decisiveOpen combinationAmber and Brown
#FFBF00 · #A52A2AAutumn depthOpen combinationRust and Sand
#B7410E · #C2B280Desert paletteOpen combinationPeach and Terracotta
#FFE5B4 · #E2725BSun-washed warmthOpen combinationCool combinations
Blue, teal and violet pairings for calm, trustworthy surfaces.
Blue and Green
#0000FF · #008000Natural calmOpen combinationTeal and Gray
#008080 · #808080Modern technicalOpen combinationNavy and SkyBlue
#000080 · #87CEEBTrusted rangeOpen combinationMidnightBlue and Cyan
#191970 · #00FFFFDeep techOpen combinationBlue and Purple
#0000FF · #800080Creative confidenceOpen combinationDenim and White
#1560BD · #FFFFFFEveryday denimOpen combinationPurple and Lavender
#800080 · #E6E6FATonal violetOpen combinationTeal and Navy
#008080 · #000080Nautical depthOpen combinationSoft & pastel
Low-saturation pairs that stay quiet even on large areas.
Pink and Gray
#FFC0CB · #808080Balanced softnessOpen combinationLavender and Cream
#E6E6FA · #FFFDD0Quiet luxuryOpen combinationBlush and Sage
#DE5D83 · #BCB88ABotanical softnessOpen combinationPastelPink and PastelBlue
#FFD1DC · #AEC6CFNursery classicOpen combinationMint and White
#98FF98 · #FFFFFFClean and freshOpen combinationLilac and Charcoal
#C8A2C8 · #36454FModern contrastOpen combinationBabyBlue and Cream
#89CFF0 · #FFFDD0Gentle classicOpen combinationMauve and Gray
#E0B0FF · #808080Muted eleganceOpen combinationEarthy combinations
Olive, clay and sand tones for organic, tactile palettes.
Olive and Cream
#808000 · #FFFDD0Organic foundationOpen combinationForestGreen and Tan
#228B22 · #D2B48CField and leatherOpen combinationBrown and Blue
#A52A2A · #0000FFUnexpected balanceOpen combinationSage and Terracotta
#BCB88A · #E2725BModern earthOpen combinationMustard and Navy
#FFDB58 · #000080Retro contrastOpen combinationBurntSienna and Linen
#E97451 · #FAF0E6Clay and clothOpen combinationOlive and Mustard
#808000 · #FFDB58Tonal earthOpen combinationEspresso and Camel
#4E342E · #C19A6BCoffee and leatherOpen combinationBold combinations
High-chroma pairs for focal points and accents, not for backgrounds.
HotPink and Lime
#FF69B4 · #00FF00Electric energyOpen combinationElectricBlue and Fuchsia
#7DF9FF · #FF00FFDigital neonOpen combinationOrange and Purple
#FFA500 · #800080Split contrastOpen combinationRed and Teal
#FF0000 · #008080Opposites attractOpen combinationYellow and Black
#FFFF00 · #000000Hazard and highlightOpen combinationTurquoise and Orange
#40E0D0 · #FFA500Tropical contrastOpen combinationFuchsia and Yellow
#FF00FF · #FFFF00Playful popOpen combinationCyan and Fuchsia
#00FFFF · #FF00FFPrint energyOpen combinationA color combination is any two colors used together on purpose. The pairs on this page are the ones designers come back to — a neutral with a strong accent, two neighbours from the same hue family, or a complementary jolt. Each page measures the contrast between the two colors and builds a pale tint, a deep shade and a neutral around them, which is usually all a layout needs.
Frequently asked questions
The most-used pairs are black and white, black and gold, navy and white, blue and green and pink and grey. A neutral plus one accent color dominates because it scales from a single button to a whole interface.
Good to know
- 48 curated pairs, each with its own hex codes, contrast ratio and five-color set.
- Every swatch links to a full color page with shades, tints, harmonies and meaning.
- Contrast is measured with the same WCAG 2.x maths the contrast checker uses.
Put a combination to work
Once you have a pair, these tools turn it into real values — palettes, gradients, shades and accessibility checks.
