Colors

The color palette used throughout the Neomorphism UI components.

These colors are defined as CSS custom properties in your globals.css file. Replace this palette to change the brand colors across all components.

Base Colors

These are the foundation colors used for neumorphism backgrounds.

White 1#F0F0F3

White 2#EEEEEE

Color Palette

Each color has 6 shades ranging from 200 (lightest) to 700 (darkest).

Limeneu-lime

200#E3FFFD

300#CCFBF8

400#83DBD6

500#6AB9B4

600#529793

700#3C7571

Pinkneu-pink

200#FFC8C8

300#FFA0A0

400#FB7575

500#DE6161

600#C04E4E

700#A33D3D

Violetneu-violet

200#FAF5FF

300#E1C2F8

400#C590EF

500#986ABC

600#6C4889

700#422956

Purpleneu-purple

200#F1EFFF

300#B5AAFF

400#745FF2

500#513FBF

600#34258C

700#1C1259

Blue Grayneu-blue-gray

200#F2F5FA

300#D2E2FF

400#728AB7

500#596E95

600#415273

700#2B3951

Grayneu-gray

200#F4F5F7

300#DDE3ED

400#808B9F

500#5B6577

600#39404E

700#2C2D30

Shadows

Neumorphism relies on two key shadow styles to create depth.

Raised

shadow-neu-raisedFor elevated elements

Pressed

shadow-neu-pressedFor pressed/inset states