Columbia blue is a soft, calming shade resembling the sky on a clear day, sitting between blue and cyan on the color wheel. It's a light, airy blue ideal for creating serene designs. Similar hues include baby blue and powder blue—perfect for adding a fresh, open feel to any design.
Columbia Blue is defined by the following color codes and values to ensure consistency across various digital platforms and devices.
- Hex Code: #C4D8E2
- RGB value: 76.9% red, 84.7% green, 88.6% blue
Accessibility considerations play a crucial role in UX and UI design color choices. Figma offers plugins in the Community to make sure your designs meet Web Content Accessibility Guidelines
For variations within the same spectrum as Columbia Blue, consider:
- powder blue (#b8e3e9): Offers a soft and airy vibe similar to Columbia Blue, with its light and serene bluish tint.
- sky blue (#82c8e5): Evokes the open, calm expanse of a clear sky, sharing Columbia Blue’s light and refreshing qualities.
- baby blue (#8fd9fb): Radiates a gentle and soothing feel akin to Columbia Blue, with its pale and delicate hue.
- pastel blue (#b3ebf2): Provides a subtle and calming touch, mirroring Columbia Blue's tranquil, muted essence.
To complement Columbia Blue, consider pairing it with:
- Cinnamon (#D47E30): Adds warmth and depth, creating a balanced and inviting look against the cool tones of Columbia Blue.
- Soft Pink (#E89EB8): Introduces a gentle contrast, offering a harmonious and delicate combination that softens Columbia Blue.
- Mint Green (#ADEBB3): Enhances Columbia Blue's calming effect, crafting a refreshing and serene palette.
- Mustard Yellow (#FFCE1B): Provides a bold and vibrant contrast, highlighting Columbia Blue's coolness through its warm tones.
- Slate Gray (#6D8196): Complements Columbia Blue with its neutral tone, offering a sophisticated and contemporary feel.
While Columbia Blue is a light, soft shade that brings a sense of calm, it may clash with:
- Bright Orange (#FF991C): Its intense vibrancy overpowers the subtlety of Columbia Blue, creating an unbalanced look.
- Neon Pink (#FF13F0): The high energy of neon pink competes with Columbia Blue’s serenity, leading to visual discord.
- Scarlet (#ED2100): This bold red hue can dominate, overshadowing Columbia Blue's gentle presence and creating an unwelcome tension.
- Neon Green (#2CFF05): With its vivid brightness, neon green creates a harsh contrast with the soft Columbia Blue, clashing in both tone and intensity.
- Cinnabar (#E84B3D): The warm, rich tone of cinnabar conflicts with Columbia Blue’s coolness, causing a dissonant palette.
Color variations
Shades
Tints
Tones
Hues
Color harmonies
Complementary
Split
Monochromatic
Analogous
Triadic
Square
Custom palettes
Pacific Whisper
Frosted Petals
Seaside Harmony
Contrast checker
- Large Text
Figma
- Normal Text
How you design, align, and build matters. Do it together with Figma.
1.47:1
WCAG 2.2 Simple Contrast
Normal Text
- Fail
- AA
- 4.5:1
- Fail
- AAA
- 7:1
Large Text
- Fail
- AA
- 3:1
- Fail
- AAA
- 4.5:1
- Large Text
Figma
- Normal Text
How you design, align, and build matters. Do it together with Figma.
14.27:1
WCAG 2.2 Simple Contrast
Normal Text
- Pass
- AA
- 4.5:1
- Pass
- AAA
- 7:1
Large Text
- Pass
- AA
- 3:1
- Pass
- AAA
- 4.5:1
Color simulations
Protanopia
Deuteranopia
Tritanopia
Achromatopsia
The hexadecimal color #C4D8E2, known as Columbia Blue, has RGB values of R:196, G:216, B:226 and CMYK values of C:13, M:4, Y:0, K:11.
| VALUE | CSS | |
|---|---|---|
| HEX | #C4D8E2 | #C4D8E2 |
| RGB DECIMAL | 196, 216, 226 | RGB(196,216,226) |
| RGB PERCENTAGE | 76.9, 84.7, 88.6 | RGB(76.9%,84.7%,88.6%) |
| CMYK | 13, 4, 0, 11 | |
| HSL | HSL(200.0, 34.1%, 82.7%) | HSL(200.0, 34.1%, 82.7%) |
| HSV (OR HSB) | 200.0°, 13.3, 88.6 | |
| WEB SAFE | #204204204 | #204204204 |
| BINARY | 11000100, 11011000, 11100010 | |
| iOS - SwiftUI | Color(red: 0.769, green: 0.847, blue: 0.886) | |
| iOS - UIKit | UIColor(red: 0.769, green: 0.847, blue: 0.886, alpha: 1) | |
| Android - Compose | Color(0xFFC4D8E2) |
