# 왜 우리는 RGB와 HSL에서 OKLCH로 전환했을까요? (번역) > Clean Markdown view of GeekNews topic #20623. Use the original source for factual precision when an external source URL is present. ## Metadata - GeekNews HTML: [https://news.hada.io/topic?id=20623](https://news.hada.io/topic?id=20623) - GeekNews Markdown: [https://news.hada.io/topic/20623.md](https://news.hada.io/topic/20623.md) - Type: news - Author: [xguru](https://news.hada.io/@xguru) - Published: 2025-05-01T09:46:01+09:00 - Updated: 2025-05-01T09:46:01+09:00 - Original source: [siosio3103.medium.com](https://siosio3103.medium.com/%EC%99%9C-%EC%9A%B0%EB%A6%AC%EB%8A%94-rgb%EC%99%80-hsl%EC%97%90%EC%84%9C-oklch%EB%A1%9C-%EC%A0%84%ED%99%98%ED%96%88%EC%9D%84%EA%B9%8C%EC%9A%94-329816984db5) - Points: 10 - Comments: 1 ## Summary **OKLCH 색상 공간**은 **사람의 인식에 기반**하여 기존의 RGB나 HSL보다 더 정밀하고 예측 가능하며, **디자인 시스템과 접근성 향상**에 적합합니다. **CSS Colors 4/5 사양**과 함께 네이티브 색상 조작 기능이 강화되고 있어, 이는 미래지향적인 선택입니다. **Stylelint, Figma 플러그인, JS 라이브러리 등** 생태계도 빠르게 발전 중이며, 디자인-개발 협업에도 긍정적입니다. 다만, 아직 생태계가 성숙하지 않았으며, 일부 조합은 모든 모니터에서 보이지 않을 수 있습니다. ## Topic Body - **OKLCH 색상 공간**은 기존의 RGB나 HSL과 달리 **사람의 인식에 기반**하여 더 정밀하고 예측 가능 - **디자인 시스템과 접근성 향상**에 적합하며, 특히 **P3 같은 광색역 색상** 표현에 강점을 가져 최신 디바이스와 더 잘 호환됨 - `oklch()`는 **읽기 쉽고 직관적인 색상 형식**으로, 코드 기반 색상 조작이 간편해짐. 밝기(L), 채도(C), 색상(H), 불투명도(a)를 구분함 - **CSS Colors 4/5 사양**과 함께 네이티브 색상 조작 기능이 강화되고 있어, OKLCH는 미래지향적인 선택임 - **Stylelint, Figma 플러그인, JS 라이브러리 등** 생태계도 빠르게 발전 중이며, 디자인-개발 협업에도 긍정적임 - 다만 아직 생태계가 성숙하지 않았으며, 일부 조합은 모든 모니터에서 보이지 않을 수 있음 ### 프로젝트에 OKLCH 적용하기 1. 기존 CSS의 색상 값을 찾아 OKLCH로 **변환**하고, Figma 플러그인이나 변환 도구를 활용해 OKLCH 색상 **복사 및 적용** 2. CSS 내 색상들을 **커스텀 속성 팔레트로 정리**해 재사용성과 유지보수성 향상 3. Stylelint와 plugin을 사용해 OKLCH 외 색상 사용을 **자동 감지 및 방지** 4. CI 환경에 Stylelint를 통합해 **색상 일관성 검사를 자동화** ### OKLCH 전환 후 얻은 이점 1. 더 나은 코드 가독성 2. 예측 가능한 색상 수정 3. 상대 색상 기반 디자인 시스템 구축 4. P3 색상 등 고급 시각 표현 지원 5. 디자인팀과의 더 나은 협업 가능성 ## Comments ### Comment 38074 - Author: chinnotching - Created: 2025-05-02T03:35:12+09:00 - Points: 1 dmx컬러조명같은 시퀀스 작성과 가독에 편의가 상당히 증가할것 같습니다