Skip to main content

​
Overview

Skelementor includes a carefully curated color palette designed for modern web applications. Use semantic color utilities to style text, backgrounds, and borders with consistent, accessible color values. Control text, background, and border colors with semantic color utilities. All colors are designed to meet WCAG accessibility standards and work seamlessly with Elementor v4’s styling system.

Text Colors

Semantic text color utilities for headings, body text, and links

Background Colors

Background color utilities for sections, cards, and containers

Border Colors

Border color utilities that work with border width utilities

​
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

​
Quick Start

​
Basic Color Usage

<!-- Text colors -->
<h1 class="text-black">Primary Heading</h1>
<p class="text-gray">Secondary text</p>
<a href="#" class="text-blue">Link</a>

<!-- Background colors -->
<div class="bg-white p-6">White background</div>
<div class="bg-blue text-white p-6">Blue background</div>

<!-- Border colors -->
<div class="border border-gray p-4">Gray border</div>

​
Color Accessibility

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

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