Start Here

Introduction

Download

Syntax

Core Concepts

Aspect Ratio

Border Radius

Border Size

Border Style

Cursor

Display

Flex

Flex Alignment

Flex Direction

Flex Grow

Flex Position

Flex Size

Flex Width

Font

Gap

Height

Margin

Padding

Spacing

Width

UI Effects

Animations

Single Box

Multi Box

3D Box

Other

Box Shadows

OutSet Shadow

InSet Shadow

Text Shadow

OutSet Shadow

InSet Shadow

UI Widgets

Accordion

Buttons

Calendar

Card

Checks & Radio

Data Tables

DropDown

DropDown Multi Select

Gallery

Pagination

Pop-Up

Progress Bar

Skeleton

Spinners

Suggestion

Tabs

Toasts

Slider

Text Boxes

Text Editor

Tool Tip

Icons

Theme Color Shade

Color Shade

Text Color

Background Color

Border Color

Gradient

Text Gradient

Single Color

Double Color

Triple Color

Background Gradient

Single Color

Double Color

Triple Color

Border Gradient

Single Color

Double Color

Triple Color

Other Pages

Landing Pages

Top Nav 1

Top Nav 2

Side Nav 1

Forget Password

Apps

Add Data

Nav First Level

Nav Second Level

Nav Third Level

N
A
V

Theme Color Shades

Explore Stunning Color Variations

Our theme color shades provide a harmonious palette to enhance your website’s design. Whether you need subtle pastels or bold contrasts, these shades ensure a visually appealing experience across all elements.

Key Features:

Fully Customizable: Adjust shades effortlessly to match your brand’s unique aesthetic.
Consistent Across Devices: Colors appear vivid and accurate on all screens, maintaining uniformity.
Predefined Color Schemes: Choose from professionally curated palettes or create your own.
Easy Integration: Implement seamless color transitions and gradients with minimal effort.
Cross-Browser Compatibility: Ensures consistent color rendering across all major browsers.

Theme Background Color

Class	Color Code	Example
CrBdTe	`hsla(var(--CrTeH) 100% 50%)`
Background Color Theme With Tranparency
CrBdTe91	`hsla(var(--CrTeH) 100% 50% / .91)`
CrBdTe94	`hsla(var(--CrTeH) 100% 50% / .94)`
CrBdTe97	`hsla(var(--CrTeH) 100% 50% / .97)`
Background Color Theme With Lightness
CrBdTe10Lt	`hsla(var(--CrTeH) 100% 10%)`
CrBdTe20Lt	`hsla(var(--CrTeH) 100% 20%)`
CrBdTe30Lt	`hsla(var(--CrTeH) 100% 30%)`
CrBdTe40Lt	`hsla(var(--CrTeH) 100% 40%)`
CrBdTe50Lt	`hsla(var(--CrTeH) 100% 50%)`
CrBdTe60Lt	`hsla(var(--CrTeH) 100% 60%)`
CrBdTe70Lt	`hsla(var(--CrTeH) 100% 70%)`
CrBdTe80Lt	`hsla(var(--CrTeH) 100% 80%)`
Color Theme With 75% Saturation and Lightness
CrBdTe75Sn10Lt	`hsla(var(--CrTeH) 75% 10%)`
CrBdTe75Sn20Lt	`hsla(var(--CrTeH) 75% 20%)`
CrBdTe75Sn30Lt	`hsla(var(--CrTeH) 75% 30%)`
CrBdTe75Sn40Lt	`hsla(var(--CrTeH) 75% 40%)`
CrBdTe75Sn50Lt	`hsla(var(--CrTeH) 75% 50%)`
CrBdTe75Sn60Lt	`hsla(var(--CrTeH) 75% 60%)`
CrBdTe75Sn70Lt	`hsla(var(--CrTeH) 75% 70%)`
CrBdTe75Sn80Lt	`hsla(var(--CrTeH) 75% 80%)`
Color Theme With 50% Saturation and Lightness
CrBdTe50Sn10Lt	`hsla(var(--CrTeH) 50% 10%)`
CrBdTe50Sn20Lt	`hsla(var(--CrTeH) 50% 20%)`
CrBdTe50Sn30Lt	`hsla(var(--CrTeH) 50% 30%)`
CrBdTe50Sn40Lt	`hsla(var(--CrTeH) 50% 40%)`
CrBdTe50Sn50Lt	`hsla(var(--CrTeH) 50% 50%)`
CrBdTe50Sn60Lt	`hsla(var(--CrTeH) 50% 60%)`
CrBdTe50Sn70Lt	`hsla(var(--CrTeH) 50% 70%)`
CrBdTe50Sn80Lt	`hsla(var(--CrTeH) 50% 80%)`
Color Theme With 75% Saturation and Transparency
CrBdTe75Sn91	`hsla(var(--CrTeH) 75% 50% / .91)`
CrBdTe75Sn94	`hsla(var(--CrTeH) 75% 50% / .94)`
CrBdTe75Sn97	`hsla(var(--CrTeH) 75% 50% / .97)`
Color Theme With 50% Saturation and Transparency
CrBdTe50Sn91	`hsla(var(--CrTeH) 50% 50% / .91)`
CrBdTe50Sn94	`hsla(var(--CrTeH) 50% 50% / .94)`
CrBdTe50Sn97	`hsla(var(--CrTeH) 50% 50% / .97)`
Color Theme With Lightness and .91 Transparency
CrBdTe10Lt91	`hsla(var(--CrTeH) 100% 10% / .91)`
CrBdTe20Lt91	`hsla(var(--CrTeH) 100% 20% / .91)`
CrBdTe30Lt91	`hsla(var(--CrTeH) 100% 30% / .91)`
CrBdTe40Lt91	`hsla(var(--CrTeH) 100% 40% / .91)`
CrBdTe50Lt91	`hsla(var(--CrTeH) 100% 50% / .91)`
CrBdTe60Lt91	`hsla(var(--CrTeH) 100% 60% / .91)`
CrBdTe70Lt91	`hsla(var(--CrTeH) 100% 70% / .91)`
CrBdTe80Lt91	`hsla(var(--CrTeH) 100% 80% / .91)`
Color Theme With Lightness and .94 Transparency
CrBdTe10Lt94	`hsla(var(--CrTeH) 100% 10% / .94)`
CrBdTe20Lt94	`hsla(var(--CrTeH) 100% 20% / .94)`
CrBdTe30Lt94	`hsla(var(--CrTeH) 100% 30% / .94)`
CrBdTe40Lt94	`hsla(var(--CrTeH) 100% 40% / .94)`
CrBdTe50Lt94	`hsla(var(--CrTeH) 100% 50% / .94)`
CrBdTe60Lt94	`hsla(var(--CrTeH) 100% 60% / .94)`
CrBdTe70Lt94	`hsla(var(--CrTeH) 100% 70% / .94)`
CrBdTe80Lt94	`hsla(var(--CrTeH) 100% 80% / .94)`
Color Theme With Lightness and .97 Transparency
CrBdTe10Lt97	`hsla(var(--CrTeH) 100% 10% / .97)`
CrBdTe20Lt97	`hsla(var(--CrTeH) 100% 20% / .97)`
CrBdTe30Lt97	`hsla(var(--CrTeH) 100% 30% / .97)`
CrBdTe40Lt97	`hsla(var(--CrTeH) 100% 40% / .97)`
CrBdTe50Lt97	`hsla(var(--CrTeH) 100% 50% / .97)`
CrBdTe60Lt97	`hsla(var(--CrTeH) 100% 60% / .97)`
CrBdTe70Lt97	`hsla(var(--CrTeH) 100% 70% / .97)`
CrBdTe80Lt97	`hsla(var(--CrTeH) 100% 80% / .97)`
Color Theme With 50% Saturation, Lightness and .91 Transparency
CrBdTe50Sn10Lt91	`hsla(var(--CrTeH) 50% 10% / .91)`
CrBdTe50Sn20Lt91	`hsla(var(--CrTeH) 50% 20% / .91)`
CrBdTe50Sn30Lt91	`hsla(var(--CrTeH) 50% 30% / .91)`
CrBdTe50Sn40Lt91	`hsla(var(--CrTeH) 50% 40% / .91)`
CrBdTe50Sn50Lt91	`hsla(var(--CrTeH) 50% 50% / .91)`
CrBdTe50Sn60Lt91	`hsla(var(--CrTeH) 50% 60% / .91)`
CrBdTe50Sn70Lt91	`hsla(var(--CrTeH) 50% 70% / .91)`
CrBdTe50Sn80Lt91	`hsla(var(--CrTeH) 50% 80% / .91)`
Color Theme With 50% Saturation, Lightness and .94 Transparency
CrBdTe50Sn10Lt94	`hsla(var(--CrTeH) 50% 10% / .94)`
CrBdTe50Sn20Lt94	`hsla(var(--CrTeH) 50% 20% / .94)`
CrBdTe50Sn30Lt94	`hsla(var(--CrTeH) 50% 30% / .94)`
CrBdTe50Sn40Lt94	`hsla(var(--CrTeH) 50% 40% / .94)`
CrBdTe50Sn50Lt94	`hsla(var(--CrTeH) 50% 50% / .94)`
CrBdTe50Sn60Lt94	`hsla(var(--CrTeH) 50% 60% / .94)`
CrBdTe50Sn70Lt94	`hsla(var(--CrTeH) 50% 70% / .94)`
CrBdTe50Sn80Lt94	`hsla(var(--CrTeH) 50% 80% / .94)`
Color Theme With 50% Saturation, Lightness and .97 Transparency
CrBdTe50Sn10Lt97	`hsla(var(--CrTeH) 50% 10% / .97)`
CrBdTe50Sn20Lt97	`hsla(var(--CrTeH) 50% 20% / .97)`
CrBdTe50Sn30Lt97	`hsla(var(--CrTeH) 50% 30% / .97)`
CrBdTe50Sn40Lt97	`hsla(var(--CrTeH) 50% 40% / .97)`
CrBdTe50Sn50Lt97	`hsla(var(--CrTeH) 50% 50% / .97)`
CrBdTe50Sn60Lt97	`hsla(var(--CrTeH) 50% 60% / .97)`
CrBdTe50Sn70Lt97	`hsla(var(--CrTeH) 50% 70% / .97)`
CrBdTe50Sn80Lt97	`hsla(var(--CrTeH) 50% 80% / .97)`
Color Theme With 50% Saturation, Lightness and .91 Transparency
CrBdTe75Sn10Lt91	`hsla(var(--CrTeH) 75% 10% / .91)`
CrBdTe75Sn20Lt91	`hsla(var(--CrTeH) 75% 20% / .91)`
CrBdTe75Sn30Lt91	`hsla(var(--CrTeH) 75% 30% / .91)`
CrBdTe75Sn40Lt91	`hsla(var(--CrTeH) 75% 40% / .91)`
CrBdTe75Sn50Lt91	`hsla(var(--CrTeH) 75% 50% / .91)`
CrBdTe75Sn60Lt91	`hsla(var(--CrTeH) 75% 60% / .91)`
CrBdTe75Sn70Lt91	`hsla(var(--CrTeH) 75% 70% / .91)`
CrBdTe75Sn80Lt91	`hsla(var(--CrTeH) 75% 80% / .91)`
Color Theme With 50% Saturation, Lightness and .94 Transparency
CrBdTe75Sn10Lt94	`hsla(var(--CrTeH) 75% 10% / .94)`
CrBdTe75Sn20Lt94	`hsla(var(--CrTeH) 75% 20% / .94)`
CrBdTe75Sn30Lt94	`hsla(var(--CrTeH) 75% 30% / .94)`
CrBdTe75Sn40Lt94	`hsla(var(--CrTeH) 75% 40% / .94)`
CrBdTe75Sn50Lt94	`hsla(var(--CrTeH) 75% 50% / .94)`
CrBdTe75Sn60Lt94	`hsla(var(--CrTeH) 75% 60% / .94)`
CrBdTe75Sn70Lt94	`hsla(var(--CrTeH) 75% 70% / .94)`
CrBdTe75Sn80Lt94	`hsla(var(--CrTeH) 75% 80% / .94)`
Color Theme With 50% Saturation, Lightness and .97 Transparency
CrBdTe75Sn10Lt97	`hsla(var(--CrTeH) 75% 10% / .97)`
CrBdTe75Sn20Lt97	`hsla(var(--CrTeH) 75% 20% / .97)`
CrBdTe75Sn30Lt97	`hsla(var(--CrTeH) 75% 30% / .97)`
CrBdTe75Sn40Lt97	`hsla(var(--CrTeH) 75% 40% / .97)`
CrBdTe75Sn50Lt97	`hsla(var(--CrTeH) 75% 50% / .97)`
CrBdTe75Sn60Lt97	`hsla(var(--CrTeH) 75% 60% / .97)`
CrBdTe75Sn70Lt97	`hsla(var(--CrTeH) 75% 70% / .97)`
CrBdTe75Sn80Lt97	`hsla(var(--CrTeH) 75% 80% / .97)`

Theme Text Color

Class	Color Code	Example
CrTe	`hsla(var(--CrTeH) 100% 50%)`	CrTe
Color Theme With Lightness
CrTe10Lt	`hsla(var(--CrTeH) 100% 10%)`	CrTe10Lt
CrTe20Lt	`hsla(var(--CrTeH) 100% 20%)`	CrTe20Lt
CrTe30Lt	`hsla(var(--CrTeH) 100% 30%)`	CrTe30Lt
CrTe40Lt	`hsla(var(--CrTeH) 100% 40%)`	CrTe40Lt
CrTe50Lt	`hsla(var(--CrTeH) 100% 50%)`	CrTe50Lt
CrTe60Lt	`hsla(var(--CrTeH) 100% 60%)`	CrTe60Lt
CrTe70Lt	`hsla(var(--CrTeH) 100% 70%)`	CrTe70Lt
CrTe80Lt	`hsla(var(--CrTeH) 100% 80%)`	CrTe80Lt
Color Theme With 75% Saturation and Lightness
CrTe75Sn10Lt	`hsla(var(--CrTeH) 75% 10%)`	CrTe75Sn10Lt
CrTe75Sn20Lt	`hsla(var(--CrTeH) 75% 20%)`	CrTe75Sn20Lt
CrTe75Sn30Lt	`hsla(var(--CrTeH) 75% 30%)`	CrTe75Sn30Lt
CrTe75Sn40Lt	`hsla(var(--CrTeH) 75% 40%)`	CrTe75Sn40Lt
CrTe75Sn50Lt	`hsla(var(--CrTeH) 75% 50%)`	CrTe75Sn50Lt
CrTe75Sn60Lt	`hsla(var(--CrTeH) 75% 60%)`	CrTe75Sn60Lt
CrTe75Sn70Lt	`hsla(var(--CrTeH) 75% 70%)`	CrTe75Sn70Lt
CrTe75Sn80Lt	`hsla(var(--CrTeH) 75% 80%)`	CrTe75Sn80Lt
Color Theme With 50% Saturation and Lightness
CrTe50Sn10Lt	`hsla(var(--CrTeH) 50% 10%)`	CrTe50Sn10Lt
CrTe50Sn20Lt	`hsla(var(--CrTeH) 50% 20%)`	CrTe50Sn20Lt
CrTe50Sn30Lt	`hsla(var(--CrTeH) 50% 30%)`	CrTe50Sn30Lt
CrTe50Sn40Lt	`hsla(var(--CrTeH) 50% 40%)`	CrTe50Sn40Lt
CrTe50Sn50Lt	`hsla(var(--CrTeH) 50% 50%)`	CrTe50Sn50Lt
CrTe50Sn60Lt	`hsla(var(--CrTeH) 50% 60%)`	CrTe50Sn60Lt
CrTe50Sn70Lt	`hsla(var(--CrTeH) 50% 70%)`	CrTe50Sn70Lt
CrTe50Sn80Lt	`hsla(var(--CrTeH) 50% 80%)`	CrTe50Sn80Lt

Theme Border Color

Class	Color Code	Example
CrBrTe	`hsla(var(--CrTeH) 100% 50%)`	CrBrTe
Border Color Theme With Lightness
CrBrTe10Lt	`hsla(var(--CrTeH) 100% 10%)`	CrBrTe10Lt
CrBrTe20Lt	`hsla(var(--CrTeH) 100% 20%)`	CrBrTe20Lt
CrBrTe30Lt	`hsla(var(--CrTeH) 100% 30%)`	CrBrTe30Lt
CrBrTe40Lt	`hsla(var(--CrTeH) 100% 40%)`	CrBrTe40Lt
CrBrTe50Lt	`hsla(var(--CrTeH) 100% 50%)`	CrBrTe50Lt
CrBrTe60Lt	`hsla(var(--CrTeH) 100% 60%)`	CrBrTe60Lt
CrBrTe70Lt	`hsla(var(--CrTeH) 100% 70%)`	CrBrTe70Lt
CrBrTe80Lt	`hsla(var(--CrTeH) 100% 80%)`	CrBrTe80Lt
Border Color Theme With 75% Saturation and Lightness
CrBrTe75Sn10Lt	`hsla(var(--CrTeH) 75% 10%)`	CrBrTe75Sn10Lt
CrBrTe75Sn20Lt	`hsla(var(--CrTeH) 75% 20%)`	CrBrTe75Sn20Lt
CrBrTe75Sn30Lt	`hsla(var(--CrTeH) 75% 30%)`	CrBrTe75Sn30Lt
CrBrTe75Sn40Lt	`hsla(var(--CrTeH) 75% 40%)`	CrBrTe75Sn40Lt
CrBrTe75Sn50Lt	`hsla(var(--CrTeH) 75% 50%)`	CrBrTe75Sn50Lt
CrBrTe75Sn60Lt	`hsla(var(--CrTeH) 75% 60%)`	CrBrTe75Sn60Lt
CrBrTe75Sn70Lt	`hsla(var(--CrTeH) 75% 70%)`	CrBrTe75Sn70Lt
CrBrTe75Sn80Lt	`hsla(var(--CrTeH) 75% 80%)`	CrBrTe75Sn80Lt
Border Color Theme With 50% Saturation and Lightness
CrBrTe50Sn10Lt	`hsla(var(--CrTeH) 50% 10%)`	CrBrTe50Sn10Lt
CrBrTe50Sn20Lt	`hsla(var(--CrTeH) 50% 20%)`	CrBrTe50Sn20Lt
CrBrTe50Sn30Lt	`hsla(var(--CrTeH) 50% 30%)`	CrBrTe50Sn30Lt
CrBrTe50Sn40Lt	`hsla(var(--CrTeH) 50% 40%)`	CrBrTe50Sn40Lt
CrBrTe50Sn50Lt	`hsla(var(--CrTeH) 50% 50%)`	CrBrTe50Sn50Lt
CrBrTe50Sn60Lt	`hsla(var(--CrTeH) 50% 60%)`	CrBrTe50Sn60Lt
CrBrTe50Sn70Lt	`hsla(var(--CrTeH) 50% 70%)`	CrBrTe50Sn70Lt
CrBrTe50Sn80Lt	`hsla(var(--CrTeH) 50% 80%)`	CrBrTe50Sn80Lt

Web Tool

Welcome Amit

Logout

Change Password

Change Email