#EDEEF0
#C9CCD1
#1D4ED8
#0B1220
#A0BFE4Sky Blue
#8C779ASlate
#934658Brick Red
#733E1FSepia
Urban Brick Red & Sepia is a complementary color palette tagged modern, blue. Near-complementary hues (about 169° apart) make this a high-contrast, attention-grabbing combination. Saturation is moderate, which keeps it flexible for both interfaces and print. Warm and cool hues are mixed, which adds depth.
Color codes click any value to copy
| Swatch | Name | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| Sky Blue | #A0BFE4 | rgb(160, 191, 228) | hsl(213, 56%, 76%) | oklch(79.4% 0.063 253) | |
| Slate | #8C779A | rgb(140, 119, 154) | hsl(276, 15%, 54%) | oklch(60.1% 0.057 312) | |
| Brick Red | #934658 | rgb(147, 70, 88) | hsl(346, 35%, 43%) | oklch(49.7% 0.105 7) | |
| Sepia | #733E1F | rgb(115, 62, 31) | hsl(22, 58%, 29%) | oklch(42.3% 0.086 49) |
Why it works and how to use it
The palette holds together thanks to its complementary hue relationship and a strong light-to-dark ladder (76% down to 29% lightness). A natural fit for websites, presentations and branding.
- Background: Sky Blue (#A0BFE4) is the lightest color, so it belongs on large surfaces.
- Text: Sepia (#733E1F) on #A0BFE4 gives 4.54:1, passing WCAG AA.
- Primary: Brick Red (#934658) is the most saturated mid-tone; use it for buttons and links (3.4:1 against the background, fine for UI elements).
- Accent: Slate (#8C779A) for highlights, badges and hover states.
1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Sky Blue on Sepia at 4.54:1.
Preview on a real UI see how the palette feels in context
BrandFeaturesPricingBlogGet started
Design faster with Urban Brick Red & Sepia
A palette preview that turns four colors into a page, so you can judge hierarchy, contrast and mood before you commit.
Primary action SecondaryCard title
Card title
Card title
Roles are assigned by lightness.
Color blindness simulation
#A0BFE4
#8C779A
#934658
#733E1F
Color-blind check: under tritanopia, Brick Red and Sepia become hard to tell apart, so do not rely on that pair alone to carry meaning.
Contrast check WCAG ratios between palette colors
| Pair | Sample | Ratio | Level |
|---|---|---|---|
#A0BFE4 on #733E1F | Aa | 4.54:1 | AA |
#A0BFE4 on #934658 | Aa | 3.4:1 | AA large only |
#8C779A on #733E1F | Aa | 2.14:1 | Fail |
#A0BFE4 on #8C779A | Aa | 2.12:1 | Fail |
#8C779A on #934658 | Aa | 1.6:1 | Fail |
#934658 on #733E1F | Aa | 1.34:1 | Fail |
Similar palettes 24 more in this mood
#A630C1
#755EF5
#7ABCFF
#80E6FF
#EA4A59
#8EC5FC
#E0C3FC
#FDFDFD
#F9E6F9
#F2BBEF
#B0E8F5
#52549C
#EEF4FF
#92CEF9
#0090DA
#072E46
#1053C1
#9267B3
#E17BA0
#FFB390
#00736B
#20A8BE
#66B6E9
#ABC7FF
#4A3222
#8B5E3C
#72D1FF
#FFF8EC
#386AD0
#6E73E3
#B49DFF
#DEB4FF
#006DA4
#4E8DF9
#A3A9FF
#D5C1FF
#B6CCFF
#62B0FF
#00A0DD
#00657B
#9F004A
#B157B3
#A390FF
#98C8FF
#93D0FF
#849DFF
#A186CC
#853E7E
#D871CA
#0582CA
#F5F0E1
#F4A261
#929100
#8EC5FC
#E0C3FC
#FDFDFD
#3B1B5D
#66428B
#D2A400
#DFDDD8
#03045E
#0077B6
#CAF0F8
#FFB703
#EEF4FF
#A9C6FF
#4C7DFF
#1B2A49
#121214
#5D6064
#B3CCFF
#E6EEFF
#7A4A2E
#2788B4
#E7A977
#F9E4D0
#3E4F93
#5467BE
#E7A03E
#F5EFE4
#0B3D91
#1E88E5
#FF9EDA
#CCFF90
#4A2C1A
#7A4B2D
#85A7F0
#F2E9DA
#DEE8FF
#8ECEFF
#002026
#936800