Homeworld to Milk Chocolate color palette

3F96D9Homeworld 422F1ACola 507896Beach View DCEFFFCotton Boll D6A974Caramel Drizzle 834800Milk Chocolate

Open in generator Export PNG, PDF, ASE…

About this palette

Homeworld to Milk Chocolate is a 6-color vintage palette: #3F96D9 (Homeworld), #422F1A (Cola), #507896 (Beach View), #DCEFFF (Cotton Boll), #D6A974 (Caramel Drizzle), #834800 (Milk Chocolate). It mixes blue, brown, white, orange tones and feels warm overall. The strongest text pairing is #422F1A on #DCEFFF with a contrast ratio of 10.79:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Homeworld	rgb(63, 150, 217)	hsl(206, 67%, 55%)
Cola	rgb(66, 47, 26)	hsl(32, 43%, 18%)
Beach View	rgb(80, 120, 150)	hsl(206, 30%, 45%)
Cotton Boll	rgb(220, 239, 255)	hsl(207, 100%, 93%)
Caramel Drizzle	rgb(214, 169, 116)	hsl(32, 54%, 65%)
Milk Chocolate	rgb(131, 72, 0)	hsl(33, 100%, 26%)

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.

Aa10.79:1 Very good#422F1A on #DCEFFF
Aa10.79:1 Very good#DCEFFF on #422F1A
Aa6.17:1 Good#DCEFFF on #834800
Aa6.17:1 Good#834800 on #DCEFFF
Aa5.92:1 Good#422F1A on #D6A974
Aa5.92:1 Good#D6A974 on #422F1A
Aa3.99:1 Poor#507896 on #DCEFFF
Aa3.99:1 Poor#DCEFFF on #507896

Color blindness preview

CSS variables

/* Homeworld to Milk Chocolate — https://swatchly.xyz/palette/3f96d9-422f1a-507896-dcefff-d6a974-834800 */
:root {
  --homeworld: #3f96d9;
  --cola: #422f1a;
  --beach-view: #507896;
  --cotton-boll: #dcefff;
  --caramel-drizzle: #d6a974;
  --milk-chocolate: #834800;
}

Tailwind CSS v4

/* Homeworld to Milk Chocolate — https://swatchly.xyz/palette/3f96d9-422f1a-507896-dcefff-d6a974-834800 */
@theme {
  --color-homeworld: #3f96d9;
  --color-homeworld-50: #f0f8ff;
  --color-homeworld-100: #e1f1ff;
  --color-homeworld-200: #bfe1ff;
  --color-homeworld-300: #95ceff;
  --color-homeworld-400: #62b1f1;
  --color-homeworld-500: #3f96d9;
  --color-homeworld-600: #1c79b9;
  --color-homeworld-700: #005f99;
  --color-homeworld-800: #004a78;
  --color-homeworld-900: #00385d;
  --color-homeworld-950: #00223c;
  --color-cola: #422f1a;
  --color-cola-50: #fff3e7;
  --color-cola-100: #f8e8d9;
  --color-cola-200: #e6d4c2;
  --color-cola-300: #d1bda8;
  --color-cola-400: #b39d86;
  --color-cola-500: #98826b;
  --color-cola-600: #7d6852;
  --color-cola-700: #65523d;
  --color-cola-800: #503f2e;
  --color-cola-900: #422f1a;
  --color-cola-950: #281d13;
  --color-beach-view: #507896;
  --color-beach-view-50: #ecf7ff;
  --color-beach-view-100: #dcf0ff;
  --color-beach-view-200: #c0dff7;
  --color-beach-view-300: #a7cae6;
  --color-beach-view-400: #85acca;
  --color-beach-view-500: #6992b1;
  --color-beach-view-600: #507896;
  --color-beach-view-700: #3b5f7b;
  --color-beach-view-800: #2a4a62;
  --color-beach-view-900: #1d394d;
  --color-beach-view-950: #0f2332;
  --color-cotton-boll: #dcefff;
  --color-cotton-boll-50: #eef7ff;
  --color-cotton-boll-100: #dcefff;
  --color-cotton-boll-200: #cddae6;
  --color-cotton-boll-300: #b4c4d1;
  --color-cotton-boll-400: #93a4b3;
  --color-cotton-boll-500: #788997;
  --color-cotton-boll-600: #5e6e7c;
  --color-cotton-boll-700: #485764;
  --color-cotton-boll-800: #37444f;
  --color-cotton-boll-900: #29343d;
  --color-cotton-boll-950: #182027;
  --color-caramel-drizzle: #d6a974;
  --color-caramel-drizzle-50: #ffead2;
  --color-caramel-drizzle-100: #fbdbb7;
  --color-caramel-drizzle-200: #e9c499;
  --color-caramel-drizzle-300: #d6a974;
  --color-caramel-drizzle-400: #b78d59;
  --color-caramel-drizzle-500: #9e7440;
  --color-caramel-drizzle-600: #845c29;
  --color-caramel-drizzle-700: #6c4918;
  --color-caramel-drizzle-800: #58390c;
  --color-caramel-drizzle-900: #472c05;
  --color-caramel-drizzle-950: #2e1a01;
  --color-milk-chocolate: #834800;
  --color-milk-chocolate-50: #fff3e9;
  --color-milk-chocolate-100: #ffe6d2;
  --color-milk-chocolate-200: #ffcda4;
  --color-milk-chocolate-300: #eeb585;
  --color-milk-chocolate-400: #d2945e;
  --color-milk-chocolate-500: #b77840;
  --color-milk-chocolate-600: #9b5f24;
  --color-milk-chocolate-700: #834800;
  --color-milk-chocolate-800: #673800;
  --color-milk-chocolate-900: #512a00;
  --color-milk-chocolate-950: #341900;
}