Ruby Red Color Codes and Color Scheme Examples: How to Use It for Headings and Buttons

Ruby red is a deep red associated with the gemstone of the same name. When using it for headings and buttons on a website, the key is not to add more bright red everywhere. First decide on the adjacent backgrounds and lettering, then give the red a clear role. This article compares a representative Ruby Red code with another Ruby shade and shows two layouts: a light registration page and a page with a large ruby-red background.

Ruby Red codes and how to choose a text color

One widely published digital swatch for Ruby Red is ■#9B111E, with RGB values of 155 red, 17 green, and 30 blue. RGB describes a color using red, green, and blue channel values; HEX is a hexadecimal code that can specify the same color on a web page. This shade is also used as a screen approximation associated with RAL 3003 Ruby red, a named color in an industrial color system. It is not an exact digital reproduction of a physical paint sample, and a color name alone does not determine one universal code.

Another reference shade called simply Ruby is ■#E0115F, which is brighter and more magenta-leaning. The names Ruby and Ruby Red do not always refer to identical digital swatches. We use the deeper Ruby Red ■#9B111E consistently for the layouts below. CSS—the styling rules that control how a web page looks—can use the HEX value directly, helping avoid confusion between different interpretations of the color name.

Deep Ruby Red ■#9B111E and white ■#FFFFFF have a contrast ratio—the relative lightness difference between two colors—of approximately 8.42:1. White lettering can work on this darker red. The other Ruby swatch ■#E0115F has only about 4.76:1 against white. Its contrast is lower, so recheck the letter color and size whenever you change the shade.

Two color schemes for headings and action buttons

An exhibition registration page: red headings and buttons on a light background

For an exhibition registration page, use warm off-white ■#FCF8F5 as the main background, Ruby Red ■#9B111E for headings and the primary “Reserve a visit” button, and deep blue-gray ■#263945 for body text. The red heading contrasts with the background at about 7.98:1, while body text has approximately 11.34:1 contrast. Keeping the red on headings and one main action highlights important elements without making the whole page red.

The button can use white ■#FFFFFF lettering, providing about 8.42:1 text contrast, while the button itself differs from the surrounding off-white by 7.98:1. Put dates and practical details on a pale blush ■#F7E5E7 panel, with deep blue-gray ■#263945 text for about 9.87:1. However, blush and the page background differ by only 1.15:1. If the panel’s edge needs to be clear, add a muted reddish-gray ■#8A6267 outline, which contrasts with the blush surface at about 4.30:1.

A concert announcement page: light lettering and a gold button on a red background

For a concert announcement, make Ruby Red ■#9B111E the large opening background and place the headline in ivory ■#FFF8EE. The text-to-background contrast is approximately 7.99:1. Group the date and venue in a smaller pale blush ■#F7E5E7 information panel with deep blue-gray ■#263945 lettering. The panel text has about 9.87:1 contrast, while the panel and surrounding Ruby Red differ by about 6.95:1.

For a “Book tickets” button, try soft gold ■#E8CF92 with deep blue-gray ■#263945 lettering. Text-to-button contrast is approximately 7.85:1, while the gold button contrasts with the Ruby Red background at about 5.52:1. Keep the gold on the main button or a similarly small area rather than applying it to every heading and decoration. This can help preserve a clear visual order between the message and the action.

Check text and control contrast before adding more red

If a button appears to blend into its surroundings, check whether its neighboring area uses the same red before making its fill more saturated. A red button on a red field needs a distinct surrounding area, spacing, or another visual cue. Do not use red alone to communicate meanings such as booking, availability, or an error: clear action labels and messages carry that information. Color impressions can also change with photography, the amount of colored area, and adjacent hues.

WCAG 2.2 (Web Content Accessibility Guidelines) Level AA requires at least 4.5:1 contrast for normal-sized text and 3:1 for large text. Visual information needed to identify user-interface controls or their states can also require 3:1 against adjacent colors. HueRoll lets you enter HEX codes, explore related colors and palette suggestions, and check the selected color against white or black. It does not automatically compare arbitrary two-color pairs or determine AA or AAA compliance, so verify each final pairing with a separate contrast test.