Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/color-melt/llms.txt

Use this file to discover all available pages before exploring further.

Color Melt is built on a contrast-first, liquid-color philosophy. Every color in the palette earns its place by serving the design — not just adding visual noise. The two base tones, Cream and Ink, anchor every page with a warm off-white background and a near-black body text that remains comfortable to read at any size. The nine dye accent colors surround them like tie-dye bleeding into fabric: vivid, saturated, and deliberately chosen to cycle through a full rainbow when animated. The result is a palette that feels energetic and handcrafted while still keeping hierarchy, contrast, and legibility intact across all nine portfolio pages.

​
Color Reference Table

All 11 colors are defined in assets/main.css as Tailwind-style utility classes. Use the hex codes below for any custom overrides, design assets, or contrast checks.
Color NameHex CodePrimary Usage
Cream#FDFBF7Page backgrounds, text on dark surfaces
Ink#1A1A24Body text, borders, dark overlays
Dye Yellow#FFCA3ABorders, backgrounds, animated text gradients, form focus
Dye Blue#1982C4Borders, backgrounds, drop-cap letters, animated gradients
Dye Red#FF595EBorders, backgrounds, text, animated gradient start
Dye Green#8AC926Backgrounds, animated text gradients
Dye Pink#FF99C8Backgrounds, text, form focus states
Dye Orange#FF924CBackgrounds
Dye Purple#6A4C93Backgrounds, gradient layers, animated text gradients
Turquoise#40E0D0Backgrounds, text selection highlight, gradient endpoints
Teal#008080Backgrounds, text

​
Using Colors in CSS

Color Melt’s stylesheet (assets/main.css) ships with Tailwind-style utility classes for every palette color. Reference them directly in your HTML without writing additional CSS. Background classes: 
/* Example background classes */
.bg-dye-red    { background-color: #FF595E; }
.bg-dye-yellow { background-color: #FFCA3A; }
.bg-cream      { background-color: #FDFBF7; }
.bg-ink        { background-color: #1A1A24; }
Text classes: 
.text-dye-red  { color: #FF595E; }
.text-ink      { color: #1A1A24; }
.text-cream    { color: #FDFBF7; }
Every dye color follows the same naming pattern — bg-dye-{name} for backgrounds and text-dye-{name} for text — so adding a colored element is as straightforward as applying the class directly in markup. Opacity variants such as bg-ink/80 and bg-dye-yellow/20 are also available for overlays and tinted surfaces.

​
Tie-Dye Animated Text

The .tie-dye-text class is the signature animation of the Color Melt theme. It applies a shifting gradient that cycles through the full dye rainbow — red → yellow → green → blue → purple — using a background-clip technique that paints the gradient through the letterforms themselves. The animation is defined in assets/main.css and runs on a five-second infinite loop: 
.tie-dye-text {
  background: linear-gradient(to right, #ff595e, #ffca3a, #8ac926, #1982c4, #6a4c93);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% auto;
  animation: gradient-shift 5s ease infinite;
}

@keyframes gradient-shift {
  0%   { background-position: 0%   50%; }
  50%  { background-position: 100% 50%; }
  to   { background-position: 0%   50%; }
}
Apply it to any inline text element: 
<span class="tie-dye-text">Color Melt</span>
The class is intended for display-weight headings and short labels. Avoid applying it to long body paragraphs where the shifting gradient would reduce readability.

​
Customizing Colors

The README recommends making targeted edits in assets/main.css rather than rewriting the stylesheet wholesale. Each color is defined once per utility class, so changing a single hex value updates every element that uses that class across all nine pages. When substituting a color:
  1. Open assets/main.css and search for the hex code you want to replace.
  2. Update the value in the relevant utility class definition.
  3. Check every page where that class appears to confirm the new color looks intentional in context.
  4. Run a contrast check against all surfaces the color touches — especially text-on-background and text-on-card combinations.
Run a color contrast check after customizing — text should maintain at least a 4.5:1 contrast ratio against its background for WCAG AA compliance.

Build docs developers (and LLMs) love

Get started for freeTalk to us