jakubkrehel/oklch-skill

oklch-skill은(는) 무엇을 하나요?

웹 프로젝트를 위한 OKLCH 색상 공간 도구입니다. hex/rgb/hsl을 oklch로 변환하고, 팔레트를 생성하며, 대비를 확인하고, 영역 경계를 처리하며, Tailwind v4로 테마를 구성합니다. oklch, 색상 변환, 팔레트 생성, 대비 비율, 영역(gamut), display p3, 디자인 토큰, 색조 이동(hue drift), 채도(chroma), 다크 모드 색상에 반응합니다.

주요 기능

• 색상 변환: hex, rgb, hsl 등 기존 색상 형식을 OKLCH로 또는 그 반대로 변환합니다.
• 팔레트 생성: 지정된 시작 색상에서 일관된 색상 팔레트를 생성합니다.
• 대비 비율 계산: WCAG AA/AAA 기준에 대한 대비 비율을 계산합니다.
• 영역(gamut) 경계 처리: sRGB 및 Display P3 영역 내에서 색상을 올바르게 처리합니다.
• Tailwind v4 통합: 디자인 토큰과 다크 모드 색상을 생성합니다.

사용 예시

# hex를 OKLCH로 변환
/oklch #ff6600

# 팔레트 생성
/palette #3b82f6

# 대비 확인
/contrast #ffffff #1a1a1a

# Tailwind v4 구성 생성
/tailwind-oklch blue=#3b82f6 green=#22c55e

트리거 키워드

• oklch
• color conversion
• palette generation
• contrast ratio
• gamut
• display p3
• design tokens
• hue drift
• chroma
• dark mode colors

설치 및 설정

이 스킬은 환경에 따라 설치 방법이 다릅니다. 일반적으로 Claude Code, Cursor 또는 Codex와 같은 AI 에이전트에서 사용할 수 있습니다.

Claude Code

claude add skill jakubkrehel/oklch-skill

수동 설치

SKILL.md 파일을 프로젝트 루트 디렉터리에 추가하거나, 에이전트 설정에서 해당 경로를 참조하도록 구성하세요.

참고 자료

• OKLCH 색상 공간 설명 (CSS)
• Tailwind CSS v4 문서
• Display P3 색 영역

라이선스

MIT