Riso Blue-Green Color Psychology & Meaning
Riso blue-green is the more professional end of risograph printing — the standard blue and teal inks used in most riso studios, creating that distinctive two-color printed aesthetic.
#FFFAED
#0077CC
#00C9A7
#1A1A1A
Background
Primary Accent
Secondary
Body Text
Riso Blue-Green Color Palette
#FFFAED · #0077CC · #00C9A7 · #1A1A1A
AAA
WCAG Grade
16.7:1
Contrast Ratio
1,900
Saves
5,200
AI Copies
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% |
Riso Blue-Green Tints & Shades
Hover states, borders and elevation need lighter and darker steps of your base colors. Here are computed tints and shades for every color in the Riso Blue-Green palette — click any swatch to copy its hex.
#FFFAED saturated orange
#0077CC saturated cyan-blue
#00C9A7 saturated teal
#1A1A1A neutral gray
Riso Blue-Green Palette Contrast Matrix (WCAG 2.1)
Every color tested as text on every other color as background. Body copy needs 4.5:1 (AA), large text and UI components 3:1. AAA requires 7:1.
| Text on Background | Preview | Ratio | Grade | Safe For |
|---|---|---|---|---|
| #1A1A1A on #FFFAED |
Aa Sample Text
| 16.70:1 | AAA | Body text, headings, UI |
| #FFFAED on #1A1A1A |
Aa Sample Text
| 16.70:1 | AAA | Body text, headings, UI |
| #1A1A1A on #00C9A7 |
Aa Sample Text
| 8.22:1 | AAA | Body text, headings, UI |
| #00C9A7 on #1A1A1A |
Aa Sample Text
| 8.22:1 | AAA | Body text, headings, UI |
| #0077CC on #FFFAED |
Aa Sample Text
| 4.47:1 | Fail | Large headings, UI components |
| #FFFAED on #0077CC |
Aa Sample Text
| 4.47:1 | Fail | Large headings, UI components |
| #1A1A1A on #0077CC |
Aa Sample Text
| 3.74:1 | Fail | Large headings, UI components |
| #0077CC on #1A1A1A |
Aa Sample Text
| 3.74:1 | Fail | Large headings, UI components |
| #00C9A7 on #0077CC |
Aa Sample Text
| 2.20:1 | Fail | Decorative use only |
| #0077CC on #00C9A7 |
Aa Sample Text
| 2.20:1 | Fail | Decorative use only |
| #00C9A7 on #FFFAED |
Aa Sample Text
| 2.03:1 | Fail | Decorative use only |
| #FFFAED on #00C9A7 |
Aa Sample Text
| 2.03:1 | Fail | Decorative use only |
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.
Hue Wheel
A split-complementary palette is often preferred by professional designers because it balances visual interest with cohesion.
History & Design Context
Risograph printing uses soy-based ink and Japanese duplicator machines. Blue and green fluorescent inks create the most popular two-color print combinations in independent publishing.
Best Design Use Cases
Warm cream for paper backgrounds. Blue for primary printed elements. Teal for secondary. Dark for text. Slight misregistration is part of the look.
Industries This Palette Suits
Publishing, zines, art books, music, independent brands, design studios.
Colors That Pair Well With Riso Blue-Green
Need a fifth color? These three companions are computed from the palette's own hue positions on the color wheel, so they extend the scheme without breaking its harmony.
orange
directly opposite #0077CC on the wheel — the strongest accent for CTAs and highlights when you need maximum energy
blue
30° beside #0077CC — a calm secondary that extends the palette without adding tension
tinted neutral
a ink-black carrying the palette's own hue — perfect for surfaces and dividers
Using Riso Blue-Green Without Breaking Accessibility
- Use #0077CC for buttons and links — it scores 4.5:1 against the #FFFAED background (above the 3:1 UI-components threshold).
- Set body text in #1A1A1A — 16.7:1 against #FFFAED passes WCAG AA (AAA) for long-form reading.
- Let #00C9A7 carry sidebars, cards and footers — at a mid lightness it separates zones without stealing focus from #0077CC.
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.
Riso Blue-Green Palette — Frequently Asked Questions
What are the hex codes in the Riso Blue-Green color palette?
The Riso Blue-Green palette contains #FFFAED, #0077CC, #00C9A7, #1A1A1A. Click any swatch on this page to copy its value, or export all four at once as CSS variables, Tailwind config, SCSS or a Figma-ready list.
Is the Riso Blue-Green color palette accessible (WCAG)?
Yes for its strongest pairings: #1A1A1A on #FFFAED reaches 16.7:1 (AAA). For body text always keep a 4.5:1 ratio and for large UI elements 3:1 — the full contrast matrix above shows the exact score for every color-on-color combination in this palette.
What colors go well with the Riso Blue-Green palette?
Beyond its own four colors, #CC5500, #0A1AC2, #1A170F extend it naturally: the complementary hue for high-energy accents, an analogous neighbor for calm transitions, and a tinted neutral for surfaces. All three are computed from this palette's hues on the color wheel.
What mood does the Riso Blue-Green palette create?
Riso Blue-Green reads as handmade, bright, graphic. Saturated cyan-blue drives the personality, grounded by saturated orange — a combination that works best when the very light base gets most of the canvas.
Can I use the Riso Blue-Green color palette commercially?
Yes. Individual color values can't be copyrighted, so the Riso Blue-Green palette is free for personal, client and commercial work — websites, branding, apps, print and social content, with no attribution required.
How do I add the Riso Blue-Green palette to Tailwind or CSS?
Use the export panel on this page: CSS variables, a Tailwind config block, SCSS variables, or a Figma copy list are generated from Riso Blue-Green's exact values, including the tint and shade ramps shown above.