Lox to Bronze Color Palette

About this palette

Lox to Bronze is a 5-color warm, vintage palette: #F4917A (Lox), #116070 (Wakame Green), #FFD0C4 (Cloud Number Nine), #272A54 (Deep Sea Base), #AA8100 (Bronze). It mixes red, blue, pink, purple, yellow tones and feels warm overall. The strongest text pairing is #FFD0C4 on #272A54 with a contrast ratio of 9.75:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Lox	rgb(244, 145, 122)	hsl(11, 85%, 72%)
Wakame Green	rgb(17, 96, 112)	hsl(190, 74%, 25%)
Cloud Number Nine	rgb(255, 208, 196)	hsl(12, 100%, 88%)
Deep Sea Base	rgb(39, 42, 84)	hsl(236, 37%, 24%)
Bronze	rgb(170, 129, 0)	hsl(46, 100%, 33%)

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.

Aa9.75:1 Very good#FFD0C4 on #272A54
Aa9.75:1 Very good#272A54 on #FFD0C4
Aa5.94:1 Good#F4917A on #272A54
Aa5.94:1 Good#272A54 on #F4917A
Aa5.14:1 Good#116070 on #FFD0C4
Aa5.14:1 Good#FFD0C4 on #116070
Aa3.78:1 Poor#272A54 on #AA8100
Aa3.78:1 Poor#AA8100 on #272A54

Color blindness preview

CSS variables

/* Lox to Bronze — https://swatchly.xyz/palette/f4917a-116070-ffd0c4-272a54-aa8100 */
:root {
  --lox: #f4917a;
  --wakame-green: #116070;
  --cloud-number-nine: #ffd0c4;
  --deep-sea-base: #272a54;
  --bronze: #aa8100;
}

Tailwind CSS v4

/* Lox to Bronze — https://swatchly.xyz/palette/f4917a-116070-ffd0c4-272a54-aa8100 */
@theme {
  --color-lox: #f4917a;
  --color-lox-50: #fff8f7;
  --color-lox-100: #ffefeb;
  --color-lox-200: #ffd7cd;
  --color-lox-300: #ffbaa9;
  --color-lox-400: #f4917a;
  --color-lox-500: #d2735e;
  --color-lox-600: #b15641;
  --color-lox-700: #923e2b;
  --color-lox-800: #752b1b;
  --color-lox-900: #5c1d10;
  --color-lox-950: #3a0f06;
  --color-wakame-green: #116070;
  --color-wakame-green-50: #e5f9ff;
  --color-wakame-green-100: #c9f4ff;
  --color-wakame-green-200: #afe2ef;
  --color-wakame-green-300: #91ccdb;
  --color-wakame-green-400: #6baebe;
  --color-wakame-green-500: #4c92a3;
  --color-wakame-green-600: #317787;
  --color-wakame-green-700: #116070;
  --color-wakame-green-800: #0b4b58;
  --color-wakame-green-900: #023a45;
  --color-wakame-green-950: #00242c;
  --color-cloud-number-nine: #ffd0c4;
  --color-cloud-number-nine-50: #fff6f4;
  --color-cloud-number-nine-100: #ffeae5;
  --color-cloud-number-nine-200: #ffd0c4;
  --color-cloud-number-nine-300: #e1bbb1;
  --color-cloud-number-nine-400: #c3998f;
  --color-cloud-number-nine-500: #a77d72;
  --color-cloud-number-nine-600: #8a6258;
  --color-cloud-number-nine-700: #704c42;
  --color-cloud-number-nine-800: #593931;
  --color-cloud-number-nine-900: #452b24;
  --color-cloud-number-nine-950: #2d1a15;
  --color-deep-sea-base: #272a54;
  --color-deep-sea-base-50: #f3f4ff;
  --color-deep-sea-base-100: #e6eaff;
  --color-deep-sea-base-200: #ced5fd;
  --color-deep-sea-base-300: #b7beeb;
  --color-deep-sea-base-400: #969dce;
  --color-deep-sea-base-500: #7a81b2;
  --color-deep-sea-base-600: #606694;
  --color-deep-sea-base-700: #4a4f78;
  --color-deep-sea-base-800: #383c5f;
  --color-deep-sea-base-900: #272a54;
  --color-deep-sea-base-950: #181a2f;
  --color-bronze: #aa8100;
  --color-bronze-50: #fff5de;
  --color-bronze-100: #ffeabb;
  --color-bronze-200: #f4d58f;
  --color-bronze-300: #e1bd6c;
  --color-bronze-400: #c59d3c;
  --color-bronze-500: #aa8100;
  --color-bronze-600: #896700;
  --color-bronze-700: #6d5200;
  --color-bronze-800: #563f00;
  --color-bronze-900: #423000;
  --color-bronze-950: #2a1d00;
}