Skip to main content

​
Color Palette

Skelementor includes a carefully curated color palette designed for modern web applications.

Color Palette

White#ffffffBackgrounds, text on dark
Black#000000Text, borders
Dark Gray#374151Primary text
Gray#6b7280Secondary text
Light Gray#9ca3afMuted text
Blue#3b82f6Primary actions, links
Green#10b981Success states
Red#ef4444Error states, warnings
Yellow#f59e0bWarning states

​
Text Colors

Control text color with semantic color utilities.

Text Colors

.text-whiteWhite#ffffffcolor: #ffffff;Text on dark backgrounds
.text-blackBlack#000000color: #000000;Primary text
.text-gray-darkDark Gray#374151color: #374151;Primary text
.text-grayGray#6b7280color: #6b7280;Secondary text
.text-gray-lightLight Gray#9ca3afcolor: #9ca3af;Muted text
.text-blueBlue#3b82f6color: #3b82f6;Links, primary actions
.text-greenGreen#10b981color: #10b981;Success messages
.text-redRed#ef4444color: #ef4444;Error messages
.text-yellowYellow#f59e0bcolor: #f59e0b;Warning messages

​
Examples

<!-- Text color examples -->
<h1 class="text-3xl font-700 text-black">Primary Heading</h1>
<p class="text-base text-gray">Secondary text content</p>
<a href="#" class="text-blue underline">Link text</a>
<div class="text-green">Success message</div>
<div class="text-red">Error message</div>
<div class="text-yellow">Warning message</div>

​
Background Colors

Control background color with semantic utilities.

Background Colors

.bg-whiteWhite#ffffffbackground-color: #ffffff;Light backgrounds
.bg-blackBlack#000000background-color: #000000;Dark backgrounds
.bg-gray-darkDark Gray#374151background-color: #374151;Dark sections
.bg-grayGray#6b7280background-color: #6b7280;Muted backgrounds
.bg-gray-lightLight Gray#f3f4f6background-color: #f3f4f6;Subtle backgrounds
.bg-blueBlue#3b82f6background-color: #3b82f6;Primary actions
.bg-greenGreen#10b981background-color: #10b981;Success states
.bg-redRed#ef4444background-color: #ef4444;Error states
.bg-yellowYellow#f59e0bbackground-color: #f59e0b;Warning states

​
Examples

<!-- Background color examples -->
<div class="bg-white p-6 rounded-lg">White background card</div>
<div class="bg-gray-light p-6 rounded-lg">Light gray background</div>
<div class="bg-blue text-white p-6 rounded-lg">
  Blue background with white text
</div>
<div class="bg-green text-white p-6 rounded-lg">Green success background</div>
<div class="bg-red text-white p-6 rounded-lg">Red error background</div>

​
Border Colors

Control border color with semantic utilities.

Border Colors

.border-whiteWhite#ffffffborder-color: #ffffff;White borders
.border-blackBlack#000000border-color: #000000;Black borders
.border-grayGray#6b7280border-color: #6b7280;Standard borders
.border-gray-lightLight Gray#e5e7ebborder-color: #e5e7eb;Subtle borders
.border-blueBlue#3b82f6border-color: #3b82f6;Primary borders

​
Examples

<!-- Border color examples -->
<div class="border border-gray p-4 rounded">Gray border</div>
<div class="border border-gray-light p-4 rounded">Light gray border</div>
<div class="border border-blue p-4 rounded">Blue border</div>
<div class="border-2 border-black p-4 rounded">Thick black border</div>

​
Color Combinations

​
High Contrast Combinations

High Contrast Text

<!-- High contrast combinations -->
<div class="bg-black text-white p-6">Black background, white text</div>
<div class="bg-white text-black p-6 border border-black">White background, black text</div>
<div class="bg-blue text-white p-6">Blue background, white text</div>
<div class="bg-green text-white p-6">Green background, white text</div>

​
Subtle Combinations

Subtle Text Colors

<!-- Subtle combinations -->
<div class="bg-white text-gray-dark p-6">White background, dark gray text</div>
<div class="bg-gray-light text-gray p-6">Light gray background, gray text</div>
<div class="bg-white text-gray-light p-6">White background, light gray text</div>

​
Status Color Combinations

Status Colors

<!-- Status color combinations -->
<div class="bg-green text-white p-4 rounded">Success: Operation completed</div>
<div class="bg-red text-white p-4 rounded">Error: Something went wrong</div>
<div class="bg-yellow text-black p-4 rounded">Warning: Please check this</div>
<div class="bg-blue text-white p-4 rounded">Info: Additional information</div>

​
Common Color Patterns

​
Card with Color Accent

Colored Card

<div class="bg-white border-l-4 border-blue p-6 rounded-lg">
  <h3 class="text-xl font-600 text-black mb-2">Card Title</h3>
  <p class="text-gray">Card content with blue accent border</p>
</div>

​
Button Color Variants

Button Colors

<button class="btn btn-blue">Primary Button</button>
<button class="btn btn-green">Success Button</button>
<button class="btn btn-red">Danger Button</button>
<button class="btn bg-gray text-white">Secondary Button</button>

​
Form Field States

Form States

<!-- Normal state -->
<input type="text" class="w-full p-3 border border-gray rounded" placeholder="Normal input">

<!-- Error state -->

<input type="text" class="w-full p-3 border border-red rounded" placeholder="Error input">

<!-- Success state -->

<input type="text" class="w-full p-3 border border-green rounded" placeholder="Success input">

Colored Navigation

<nav class="bg-blue text-white p-4">
  <div class="flex items-center justify-between">
    <h1 class="text-xl font-700">Logo</h1>
    <div class="flex gap-6">
      <a href="#" class="text-white hover:text-gray-light">
        Home
      </a>
      <a href="#" class="text-white hover:text-gray-light">
        About
      </a>
      <a href="#" class="text-white hover:text-gray-light">
        Contact
      </a>
    </div>
  </div>
</nav>

​
Color Accessibility

​
Contrast Requirements

Accessibility Note: Ensure sufficient color contrast for readability. The color palette is designed to meet WCAG AA standards.

Contrast Guidelines

  • Normal text: Minimum 4.5:1 contrast ratio - Large text: Minimum 3:1 contrast ratio - UI components: Minimum 3:1 contrast ratio - Focus indicators: Minimum 3:1 contrast ratio

​
Color Blindness Considerations

Color Blindness Support

  • Don’t rely solely on color to convey information - Use icons, text, or patterns alongside color - Test with color blindness simulators - Provide alternative ways to identify status

​
Color Best Practices

​
Semantic Usage

1

Use Semantic Colors

Use colors that match their semantic meaning (green for success, red for errors).
2

Maintain Consistency

Use the same colors for the same purposes throughout your design.
3

Consider Context

Choose colors that work well with your brand and content.
4

Test Accessibility

Ensure all color combinations meet accessibility standards.

​
Color Hierarchy

Color Hierarchy

  1. Primary: Blue for main actions and links 2. Secondary: Gray for supporting text and elements 3. Success: Green for positive feedback 4. Warning: Yellow for cautionary messages 5. Error: Red for errors and destructive actions 6. Neutral: White, black, and grays for structure

​
Custom Colors

​
Adding Custom Colors

To add your own colors, create CSS with your custom color utilities: 
/* Custom brand colors */
.text-brand {
  color: #your-brand-color;
}
.bg-brand {
  background-color: #your-brand-color;
}
.border-brand {
  border-color: #your-brand-color;
}

/* Custom accent colors */
.text-accent {
  color: #your-accent-color;
}
.bg-accent {
  background-color: #your-accent-color;
}

​
Color Variables

For better maintainability, consider using CSS custom properties: 
:root {
  --brand-primary: #your-brand-color;
  --brand-secondary: #your-secondary-color;
}

.text-brand {
  color: var(--brand-primary);
}
.bg-brand {
  background-color: var(--brand-primary);
}

Typography

Text utilities that work with colors

Borders

Border utilities with color support

Components

Pre-built components with color variants

Effects

Opacity utilities for color effects