Royal Blue to Ice Climber Color Palette

About this palette

Royal Blue to Ice Climber is a 5-color vibrant, cool palette: #3B63E1 (Royal Blue), #00A15C (Shamrock), #FF577A (Warm Pink), #FF6D35 (Carrot), #00DFBD (Ice Climber). It mixes blue, green, red, turquoise tones and feels cool overall. The strongest text pairing is #3B63E1 on #00DFBD with a contrast ratio of 3.03:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Royal Blue	rgb(59, 99, 225)	hsl(226, 73%, 56%)
Shamrock	rgb(0, 161, 92)	hsl(154, 100%, 32%)
Warm Pink	rgb(255, 87, 122)	hsl(348, 100%, 67%)
Carrot	rgb(255, 109, 53)	hsl(17, 100%, 60%)
Ice Climber	rgb(0, 223, 189)	hsl(171, 100%, 44%)

Accessible color pairs

Pairs with at least 3:1 contrast (large text and UI components); 4.5:1 or more passes WCAG AA for body text.

Aa3.03:1 Poor#3B63E1 on #00DFBD
Aa3.03:1 Poor#00DFBD on #3B63E1

Color blindness preview

CSS variables

/* Royal Blue to Ice Climber — https://swatchly.xyz/palette/3b63e1-00a15c-ff577a-ff6d35-00dfbd */
:root {
  --royal-blue: #3b63e1;
  --shamrock: #00a15c;
  --warm-pink: #ff577a;
  --carrot: #ff6d35;
  --ice-climber: #00dfbd;
}

Tailwind CSS v4

/* Royal Blue to Ice Climber — https://swatchly.xyz/palette/3b63e1-00a15c-ff577a-ff6d35-00dfbd */
@theme {
  --color-royal-blue: #3b63e1;
  --color-royal-blue-50: #f1f5ff;
  --color-royal-blue-100: #e4ecff;
  --color-royal-blue-200: #c8d9ff;
  --color-royal-blue-300: #a8c2ff;
  --color-royal-blue-400: #7ba0ff;
  --color-royal-blue-500: #537fff;
  --color-royal-blue-600: #3b63e1;
  --color-royal-blue-700: #294bbe;
  --color-royal-blue-800: #1c379d;
  --color-royal-blue-900: #12287f;
  --color-royal-blue-950: #081756;
  --color-shamrock: #00a15c;
  --color-shamrock-50: #deffe8;
  --color-shamrock-100: #b8ffd0;
  --color-shamrock-200: #99eeb7;
  --color-shamrock-300: #75da9c;
  --color-shamrock-400: #43bd79;
  --color-shamrock-500: #00a15c;
  --color-shamrock-600: #008249;
  --color-shamrock-700: #006739;
  --color-shamrock-800: #00512b;
  --color-shamrock-900: #003e20;
  --color-shamrock-950: #002712;
  --color-warm-pink: #ff577a;
  --color-warm-pink-50: #ffeef0;
  --color-warm-pink-100: #ffdfe2;
  --color-warm-pink-200: #ffc1c7;
  --color-warm-pink-300: #ff9ba7;
  --color-warm-pink-400: #ff577a;
  --color-warm-pink-500: #df3761;
  --color-warm-pink-600: #be1249;
  --color-warm-pink-700: #9c0038;
  --color-warm-pink-800: #7c002b;
  --color-warm-pink-900: #620020;
  --color-warm-pink-950: #410013;
  --color-carrot: #ff6d35;
  --color-carrot-50: #fff2ed;
  --color-carrot-100: #ffe4db;
  --color-carrot-200: #ffc9b6;
  --color-carrot-300: #ffa788;
  --color-carrot-400: #ff6d35;
  --color-carrot-500: #df4f09;
  --color-carrot-600: #b63d00;
  --color-carrot-700: #922f00;
  --color-carrot-800: #732400;
  --color-carrot-900: #5b1a00;
  --color-carrot-950: #3b0e00;
  --color-ice-climber: #00dfbd;
  --color-ice-climber-50: #d7fff4;
  --color-ice-climber-100: #a8ffe9;
  --color-ice-climber-200: #7defd4;
  --color-ice-climber-300: #00dfbd;
  --color-ice-climber-400: #00bb9e;
  --color-ice-climber-500: #009c83;
  --color-ice-climber-600: #007e6a;
  --color-ice-climber-700: #006454;
  --color-ice-climber-800: #004e41;
  --color-ice-climber-900: #003d32;
  --color-ice-climber-950: #00261f;
}