Color Studio | UI Showcase Pro

UI Showcase Pro

Components Colors Animations Playground Typography Dashboard 3D

Components Colors Animations Playground Typography Dashboard 3D

Color Studio

Explore color harmonies, check WCAG contrast ratios, and preview palettes on real UI components.

UI Showcase Pro

A cinematic design showcase

Components Colors Animations Playground Typography Dashboard 3D

© 2026 UI Showcase Pro. Built with Next.js, Tailwind CSS, and Framer Motion.

#6366F1HSL(239, 84%, 67%)

Color Harmony

ComplementaryAnalogousTriadicSplit Comp.Tetradic

WCAG Contrast Checker

Sample Text

Aa

Foreground: #6366F1

Background: #F27CF4

1.91: 1

AA NormalFail

AA LargeFail

AAA NormalFail

AAA LargeFail

Component Preview

Button

Card

Card Title

This is a preview card rendered with your palette colors applied.

Input

Badge

PrimaryAccentOutline

Toggle

Palette Presets