Choosing Jade Green Color Codes: Comparing Bluish Tones and Brightness

Looking up hisui-iro, the Japanese color name for jade green, can reveal green swatches with different bluish undertones and brightness. Rather than relying on the name alone, web designers can choose a reference swatch and adjust it to suit each purpose. This article compares four samples and demonstrates ways to use them for headings, backgrounds, and information cards on a mineral exhibition website.

Choose a reference HEX code before comparing hue and brightness

Hisui-iro is a Japanese color name for a green reminiscent of jade gemstones, often with a bluish cast. Jade itself can have a variety of colors, and the name does not specify a single digital value. One Japanese color reference gives jade green ■#38B48B, while another uses the darker ■#3F9877. HEX means the six-digit hexadecimal notation used to specify web colors. Recording the chosen code alongside the name avoids confusion.

We use jade green ■#38B48B as our starting point. In RGB, which expresses red, green, and blue light components as numbers from 0 to 255, it has red 56, green 180, and blue 139. Green is the largest component, while the blue component contributes to its blue-green appearance.

A bluer variation ■#38A0B5 contains red 56, green 160, and blue 181. Blue now exceeds green, shifting the result toward a more noticeably blue-green shade without changing overall brightness dramatically. A lighter variation ■#A8E0CD contains red 168, green 224, and blue 205. The generally higher component values create a paler option suitable for larger background surfaces. These last two shades are comparison colors selected for this article, not officially fixed codes for the name “jade green.”

Give headings and information cards different color roles

Example 1: Use jade green for the opening banner. On a mineral exhibition website, place the heading “An Exhibition of Jade Specimens” over a jade green ■#38B48B background with deep blue-black ■#061B22 lettering. The text-to-background contrast ratio is about 6.80:1. A contrast ratio describes the difference in relative brightness between two adjacent colors. For the article body, use off-white ■#F7FAF7 behind blue-black ■#061B22 text to reach about 16.82:1.

Put a “View Exhibition Details” button on the jade-green banner using a blue-black ■#061B22 fill with white ■#FFFFFF text. The button lettering contrasts with its fill at about 17.68:1, and the button contrasts with the surrounding jade green ■#38B48B at about 6.80:1. The green creates the overall impression while the dark button identifies the action.

Example 2: Use bluer color for the banner and pale green for details. For a water-themed exhibit, switch the banner background to the bluer variation ■#38A0B5, keeping the blue-black ■#061B22 heading. This combination reaches about 5.78:1. Use the lighter variation ■#A8E0CD as a card background for specimen origins and dimensions, with blue-black ■#061B22 text at about 11.96:1. The bluer shade changes the color direction, whereas the lighter one supports detailed information.

Do not rely on small color differences for states or boundaries

The reference jade green ■#38B48B and its bluer variation ■#38A0B5 contrast at only about 1.18:1. Do not indicate selected versus unselected items using these colors alone; add text labels or underlines. The lighter card ■#A8E0CD also differs from the off-white ■#F7FAF7 page background by just 1.41:1. When a visible outline is needed, a muted blue-green ■#4C7069 border contrasts about 3.71:1 with the card and 5.22:1 with the surrounding page.

Normal-size white ■#FFFFFF lettering on reference jade green ■#38B48B achieves only about 2.60:1, while on the bluer variation ■#38A0B5 it achieves about 3.06:1. Avoid both combinations for ordinary text. WCAG 2.2, the Web Content Accessibility Guidelines, generally requires 4.5:1 for normal text and 3:1 for qualifying large text at Level AA. Some essential non-text indicators, including parts of interactive controls, also require 3:1 contrast against adjacent colors.

HueRoll lets you adjust colors using HEX input and check the selected color against white and black. It cannot compare arbitrary pairs of colors or automatically judge AA compliance. Before publishing, check the actual combinations of text, background, buttons, and borders separately.