Colour pairings
Rust and Sage
Rust (#B7410E) paired with sage (#9CAF88). Below are both colours expanded into full 11-step ramps, generated in OKLCH for even lightness steps and gamut-mapped to sRGB. Copy the Tailwind v4 config for either, or open them in the generator to fine-tune.
50#FFF2ED
100#FFE0D4
200#FFC6B2
300#FF9F7E
400#FA7647
500#DC5825
600#B7410E
700#9A3D23
800#773121
900#5F2B1F
950#2F0F09
rust — Tailwind v4@theme
@theme {
--color-rust-50: #fff2ed;
--color-rust-100: #ffe0d4;
--color-rust-200: #ffc6b2;
--color-rust-300: #ff9f7e;
--color-rust-400: #fa7647;
--color-rust-500: #dc5825;
--color-rust-600: #b7410e;
--color-rust-700: #9a3d23;
--color-rust-800: #773121;
--color-rust-900: #5f2b1f;
--color-rust-950: #2f0f09;
}
50#F3F7F1
100#E3EADE
200#CEDAC3
300#B2C2A1
400#9CAF88
500#7C8F68
600#677754
700#586348
800#464D38
900#3A3F2F
950#191C12
sage — Tailwind v4@theme
@theme {
--color-sage-50: #f3f7f1;
--color-sage-100: #e3eade;
--color-sage-200: #cedac3;
--color-sage-300: #b2c2a1;
--color-sage-400: #9caf88;
--color-sage-500: #7c8f68;
--color-sage-600: #677754;
--color-sage-700: #586348;
--color-sage-800: #464d38;
--color-sage-900: #3a3f2f;
--color-sage-950: #191c12;
}
Aesthetic
Want this palette built into your site?
You bring the colours. You'll get a site that uses them properly, designed and built by the team at Aesthetic.