#3A86FF
#8EC5FC
#E0C3FC
#FFFFFF
#638CCCBlue Gray
#A6C3E1Sky Blue
#D9CAE9Thistle
#FDFDFDWhite
Blue Gray & Thistle Hour is a pastel light, analogous color palette tagged gradient, cold, blue. Analogous neighbors on the wheel (Blue Gray, Sky Blue, Thistle) give it a natural, low-tension flow. High lightness and gentle saturation put it firmly in pastel territory. The overall temperature is cool.
Color codes click any value to copy
| Swatch | Name | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| Blue Gray | #638CCC | rgb(99, 140, 204) | hsl(217, 51%, 59%) | oklch(63.7% 0.107 259) | |
| Sky Blue | #A6C3E1 | rgb(166, 195, 225) | hsl(211, 50%, 77%) | oklch(80.6% 0.053 249) | |
| Thistle | #D9CAE9 | rgb(217, 202, 233) | hsl(269, 41%, 85%) | oklch(86.1% 0.045 307) | |
| White | #FDFDFD | rgb(253, 253, 253) | hsl(0, 0%, 99%) | oklch(99.4% 0.000 0) |
Why it works and how to use it
It works because the lightness steps are gentle (59% to 99%), which keeps the mood consistent from edge to edge. Try it for social media templates and gentle interfaces.
- Background: White (#FDFDFD) is the lightest color, so it belongs on large surfaces.
- Text: Blue Gray (#638CCC) on #FDFDFD gives 3.35:1, enough for large headings only.
- Primary: Sky Blue (#A6C3E1) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Thistle (#D9CAE9) for highlights, badges and hover states.
No pair inside the palette reaches 4.5:1, so add black or white for body text.
Preview on a real UI see how the palette feels in context
BrandFeaturesPricingBlogGet started
Design faster with Blue Gray & Thistle Hour
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
#638CCC
#A6C3E1
#D9CAE9
#FDFDFD
Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.
Contrast check WCAG ratios between palette colors
| Pair | Sample | Ratio | Level |
|---|---|---|---|
#638CCC on #FDFDFD | Aa | 3.35:1 | AA large only |
#638CCC on #D9CAE9 | Aa | 2.21:1 | Fail |
#638CCC on #A6C3E1 | Aa | 1.87:1 | Fail |
#A6C3E1 on #FDFDFD | Aa | 1.79:1 | Fail |
#D9CAE9 on #FDFDFD | Aa | 1.52:1 | Fail |
#A6C3E1 on #D9CAE9 | Aa | 1.18:1 | Fail |
Similar palettes 24 more in this mood
#304D7C
#4F78A9
#89B3D6
#E9F1F7
#BD5BD4
#8EC5FC
#E0C3FC
#FDFDFD
#E7F0FF
#6EB1FF
#267CB9
#434F58
#46399E
#5F68D3
#8CAAFC
#E3F2FD
#445C89
#759FC9
#ACDAFF
#E4F1F9
#005479
#0081AB
#38BEE5
#E3F2FD
#0094DC
#7ACBF3
#CFCAFF
#FDFDFD
#183C85
#3681C7
#65B9F7
#F5FBFF
#0D47A1
#1976D2
#64B5F6
#E3F2FD
#A630C1
#755EF5
#7ABCFF
#80E6FF
#005EA2
#8049CD
#5B6AC0
#F7B2FF
#023E8A
#0077B6
#00B4D8
#90E0EF
#D9ED92
#99D98C
#52B69A
#168AAD
#ADC0FF
#62AEEE
#AF85FF
#BA71C1
#5F31A6
#8F37B7
#DA86E8
#FEF8FF
#6F3EAB
#9C38A1
#8B98FF
#7FBCFF
#2FA4FF
#956FF2
#526CFC
#912BAE
#00736B
#20A8BE
#66B6E9
#ABC7FF
#433069
#6B4281
#A77CAF
#EFE7F0
#7D3E7F
#4551AA
#006AB0
#DBCAFF
#3F71CC
#AE47D1
#B0A5FF
#40C1FF
#386AD0
#6E73E3
#B49DFF
#DEB4FF
#95489F
#3F9CEF
#C1A3FF
#B6C5FF