Tailwind v4 테마 생성기
베이스 컬러를 입력하면 oklch 색공간 기반 11단계 팔레트를 생성하고 Tailwind v4 @theme 코드를 출력합니다.
색상 설정
#818CF8
oklch(68.0% 0.158 276.936)
→ --color-primary-500
생성된 팔레트
50
100
200
300
400
500
600
700
800
900
950
50
100
200
300
400
500
600
700
800
900
950
Tailwind v4 @theme 코드
@theme {
--color-primary-50: oklch(97.0% 0.0633 276.9);
--color-primary-100: oklch(94.0% 0.0633 276.9);
--color-primary-200: oklch(88.0% 0.1108 276.9);
--color-primary-300: oklch(79.0% 0.1583 276.9);
--color-primary-400: oklch(68.0% 0.1583 276.9);
--color-primary-500: oklch(56.0% 0.1583 276.9);
--color-primary-600: oklch(47.0% 0.1583 276.9);
--color-primary-700: oklch(39.0% 0.1583 276.9);
--color-primary-800: oklch(30.0% 0.1108 276.9);
--color-primary-900: oklch(22.0% 0.0633 276.9);
--color-primary-950: oklch(16.0% 0.0633 276.9);
}개별 값 복사
50oklch(97.0% 0.0633 276.9)
100oklch(94.0% 0.0633 276.9)
200oklch(88.0% 0.1108 276.9)
300oklch(79.0% 0.1583 276.9)
400oklch(68.0% 0.1583 276.9)
500oklch(56.0% 0.1583 276.9)
600oklch(47.0% 0.1583 276.9)
700oklch(39.0% 0.1583 276.9)
800oklch(30.0% 0.1108 276.9)
900oklch(22.0% 0.0633 276.9)
950oklch(16.0% 0.0633 276.9)