Documentation - Colors.
Discover Marssel: an intelligent, minimal configuration CSS framework designed for fast interfaces and a simplified developer experience.
Startup
Basic concepts
Utilities
Colors
Marssel offers a flexible system for managing colors in your utility classes, supporting hexadecimal, RGB, RGBA formats and theme variables.
Supported formats
Marssel accepts several color formats:
<!-- Hexadecimal without # -->
<div class="bg-[ff0000]">Red</div>
<div class="bg-[0000ff] c-[white]">Blue</div>
<!-- Short hexadecimal -->
<div class="bg-[000] c-[white]">Black</div>
<div class="bg-[999]">Gray</div>
<!-- RGB -->
<div class="bg-rgb-[255,0,0]">Red RGB</div>
<div class="c-rgb-[0,128,255]">Blue text</div>
<!-- RGBA with transparency -->
<div class="bg-rgba-[255,0,0,50%]">Red 50% transparent</div>
<div class="bg-rgba-[0,0,0,0.5]">Black 50% transparent</div>Text colors
Use c- or c- for text color:
<p class="c-[000000]">Black text</p>
<h2 class="c-[2563eb]">Blue title</h2>
<span class="c-rgba-[0,0,0,70%]">Semi-transparent text</span>
<a href="#" class="c-[6b7280] c-[2563eb]:hover">Link with hover</a>Background colors
Use bg- or background-c- for the background color:
<!-- Colorful background -->
<div class="bg-[f3f4f6]">Light gray background</div>
<!-- Background with border -->
<div class="bg-[000] border-[1px_solid_e5e7eb] c-[white]">
Content with white background
</div>
<!-- Transparent background -->
<div class="bg-rgba-[0,0,0,20%]">Black background 20% opaque</div>
<!-- Hover background -->
<button class="bg-[2563eb] bg-[1d4ed8]:hover">
Button with hover
</button>Border colors
Apply colors to the borders:
<!-- Colorful border -->
<div class="border-[2px_solid_2563eb]">Blue border</div>
<!-- Multiple borders -->
<div class="border-t-[1px_solid_37e32f] border-b-[1px_solid_37e32f]">
Top and bottom borders
</div>
<!-- Border with hover -->
<input class="border-[1px_solid_d1d5db] border-[2563eb]:focus">Linear gradients
Create gradients with bg-linear-:
<!-- Horizontal gradient -->
<div class="bg-linear-[to_right,667eea,764ba2]">
Horizontal gradient
</div>
<!-- Vertical gradient -->
<div class="bg-linear-[to_bottom,667eea,764ba2]">
Vertical gradient
</div>
<!-- Diagonal gradient -->
<div class="bg-linear-[135deg,667eea_0%,464ba2_100%]">
Diagonal gradient
</div>
<!-- Gradient with multiple colors -->
<div class="bg-linear-[to_right,67eea4,f093fb,764ba2]">
Multicolor gradient
</div>
<!-- Complex gradient -->
<div class="bg-linear-[90deg,FF1000_0%,rgba(9,9,121,1)_35%] bg-size-[40px_40px] c-[white]">
Complex gradient
</div>Radial gradients
Create radial gradients with bg-radial-:
<!-- Simple radial gradient -->
<div class="bg-radial-[circle,667eea,764ba2]">
Circular gradient
</div>
<!-- Complex gradient -->
<div class="bg-radial-[circle,rgba(2,0,36,1)_0%,45d21a_35%,rgb(65,55,114)_59%,FF0000_66%,blue_93%]">
Complex gradient
</div>Theme variables
Use the colors defined in your theme:
<!-- Predefined theme colors -->
<div class="bg-[theme-primary]">Primary background</div>
<div class="bg-[theme-secondary]">Secondary background</div>
<div class="c-[theme-text] bg-[theme-mirage]">Theme text</div>
<!-- In the borders -->
<div class="border-[1px_solid_theme-border]">
Thematic border
</div>
<!-- In the gradients -->
<div class="bg-linear-[to_right,theme-primary,theme-secondary]">
Thematic gradient
</div>Automatic conversion
Marssel automatically converts formats:
class="bg-[ff0000]" // → background-color: #ff0000
class="bg-[000]" // → background-color: #000
class="bg-rgb-[255,0,0]" // → background-color: rgb(255, 0, 0)
class="bg-rgba-[0,0,0,0]" // → background-color: rgba(0, 0, 0, 0)
class="bg-linear-[to_right,667eea,764ba2]" // → background: linear-gradient(to right, #667EEA, #764BA2);