logo image
메인
기술
HOME
기술

OKLCH

new 1
목록
#cs #oklch
OKLCH
사람이 보는 기준으로의 색상표기법

문법
oklch(L C H[ / A])
oklch(밝기 채도 색상[ / 알파])

L (Lightness)(밝기) : 0~1, 0~100%
C (Chroma)(채도) : 0~ 약 0.4 (색상에 따라서 다름)
H (Hue)(색상) : 0deg ~ 360deg (deg 생략 가능)
A (Alpha)(투명도) : 0~1, 0~100%

지원 현황
Chrome 111 (Release date: ⁨2023-03-07⁩)
Safari 15.4 (Release date: ⁨2022-03-14⁩)

장점
1. 일관련 색상 변화
1.1. L C 고정에 H 변경 시 일관적인 색상 변화, C H 고정에 L 변경 시 일관적인 밝기 변화
1.2. RGB는 일관적 변경을 계산하기 힘듬. HSL은 사람이 느끼기에 왜곡이 있고 균일성이 떨어짐 => 개선한것이 OKLCH
2. 사람이 알기 쉬운 표기

기타
1. OKLAB 의 표현을 사람이 알기 쉽도록 한 것이 OKLCH
2. OKLCH 와 LCH는 같은 개념에 색공간의 차이. 
2.1. LCH는 LAB(CIELAB) 기반.
3. OKLAB 과 LAB(CIELAB)의 관계
3.1. LAB지각 균등성의 오차가 있음. 색상 외곡 발생.
4. LCH 말고 OKLCH 를 쓰면 된다.(지원 된다면)

결론
디지털의 색상채계가 사람이 보기에 오차가 있고 균일하지 않아서 그걸 수정해서 맞춘 것이 OKLAB  이고, 
그걸 사람이 보고 쉽게 한 것이 OKLCH
목록
댓글
  • / /
  • No Nickname
    No Comment
  • 권한이 없습니다.
    {{m_row.m_nick}}
    -
tag
제목 작성자 날짜
[기본형] HTML (with 부트스트랩5.3 , jquery 3.7, vue.js)
#기본형
공대여자
유용한 리눅스(LINUX) 명령어
#linux #command
공대여자
[공지] 기술 게시판
#etc #공지
mins01
css color space new 1
#css #color-space
공대여자
OKLCH new 1
#cs #oklch
공대여자
부트스트랩5 용 :focus 강조 스타일 new
#css #부스트스랩
공대여자
scrollbar-gutter new 1
#css #scrollbar
공대여자
ui-text-highlighter 1
#highlight
공대여자
css color-mix() 1
#css
공대여자
윈도우에서 wsl 설치
#wsl
공대여자
ui-boardgame baduk 2
#ui #boardgame #baduk #go
공대여자
canvas context2D 에서 getImageData 사용을 자제하자.
#canvas
공대여자
ui-boardgame 2
#ui #boardgame #chess
공대여자
UI timeline 1
#ui #timeline
공대여자
openstreetmap.org 상업적으로 사용가능한 무료 지도 1
#map
공대여자
animate.style css 모션 라이브러리 1
#css #animate
공대여자
electron-sample-app 1
#electron
공대여자
KoNLPy: 파이썬 한국어 NLP 1
#pythone #형태소
공대여자
tag