Riso Blue-Green
Use #FFFAED as the background. Use #0077CC as the primary accent. Use #00C9A7 as secondary. Use #1A1A1A as body text. Palette: Riso Blue-Green.
Hex Codes, RGB & CMYK Color Values
Technical breakdown for the Riso Blue-Green color scheme. Use these values for web design (HEX/RGB), print projects (CMYK), or specialized design software (HSL).
| Swatch | Design Role | HEX | RGB | CMYK | HSL |
|---|---|---|---|---|---|
| Background Luminance: 95.7% | 255, 250, 237 | 0%, 2%, 7%, 0% | 43°, 100%, 96% | ||
| Primary Accent Luminance: 17.6% | 0, 119, 204 | 100%, 42%, 0%, 20% | 205°, 100%, 40% | ||
| Secondary Luminance: 44.6% | 0, 201, 167 | 100%, 0%, 17%, 21% | 170°, 100%, 39% | ||
| Body Text Luminance: 1.0% | 26, 26, 26 | 0%, 0%, 0%, 90% | 0°, 0%, 10% |
Color Harmony: Split-Complementary Scheme
The Riso Blue-Green palette is built using a split-complementary relationship between its hues. This ensures that even with high-contrast accents, the overall scheme feels balanced and intentional.
A split-complementary palette is often preferred by professional designers because it balances visual interest with cohesion.
History & Design Context
Best Design Use Cases
Industries This Palette Suits
How to Implement the Riso Blue-Green Color Scheme
To use this Riso Blue-Green color palette in your web project, you can copy the following CSS variables or Tailwind CSS configuration. These roles ensure your UI maintains accessibility and visual hierarchy.
Option 1: CSS Variables
:root {
/* {name} Palette - ihatecolors.com */{'
'} --color-bg: {colors[0]};{'
'} --color-primary: {colors[1]};{'
'} --color-secondary: {colors[2]};{'
'} --color-text: {colors[3]};{'
'} {'}'} Web Design Tip
Use #FFFAED for the main background and #0077CC for primary buttons. This creates a high-contrast focal point.
Accessibility Note
The contrast ratio between #1A1A1A and #FFFAED is 16.70:1 (AAA). Ensure your body text remains legible.