인터넷 애호가를 위한 Uchū 색상 팔레트

 (uchu.style)
2P by GN⁺ | ★ favorite | 댓글 1개
  • Uchū는 NetOperator Wibby가 만든 인터넷 애호가용 색상 팔레트로, 색상 이름보다 oklch() 수치 목록을 중심으로 제공됨
  • 팔레트는 8개 색상 묶음으로 나뉘며, 각 묶음은 9단계의 oklch(L C H) 값으로 구성됨
  • 첫 묶음은 채도 0.002~0.004 수준의 저채도 계열이고, 나머지는 색상각 기준으로 빨강·분홍·보라·파랑·초록·노랑·주황 계열처럼 보임
  • 색상별 이름, 적용 예시, 코드 샘플, 다운로드 방식, 라이선스 정보는 제공되지 않음
  • 디자인 시스템이나 테마에 쓰려면 제공된 OKLCH 수치를 직접 복사해 적용해야 함

Uchū 팔레트의 기본 형태

  • Uchū는 “the color palette for internet lovers”라는 설명과 함께 제공되는 색상 팔레트임
  • 작성자는 NetOperator Wibby로 표시되어 있음
  • 팔레트는 설명문보다 oklch() 값 목록이 중심이며, 각 값은 밝기·채도·색상각에 해당하는 세 숫자로 색상을 지정함

팔레트 구성 방식

  • 전체 팔레트는 8개 색상 묶음으로 구성됨
  • 각 묶음에는 9개의 oklch() 값이 있음
  • 단계 표기는 각 묶음에서 ### 2부터 ### 9까지 보이며, 첫 번째 값은 별도 숫자 제목 없이 앞에 배치됨

색상 묶음별 OKLCH 범위

  • 저채도 계열

    • 채도 값이 0.002~0.004 수준임
    • 시작 값: oklch(0.9557 0.003 286.35)
    • 마지막 값: oklch(0.5682 0.004 247.89)

  • 빨강·분홍 계열로 보이는 색상각

    • 두 번째 묶음은 색상각이 약 3~19 범위에 있음
      • 시작 값: oklch(0.8898 0.052 3.28)
      • 마지막 값: oklch(0.4117 0.157 16.58)
    • 세 번째 묶음은 색상각이 약 352~355 범위에 있음
      • 시작 값: oklch(0.958 0.023 354.27)
      • 마지막 값: oklch(0.5768 0.074 353.14)

  • 보라·파랑 계열로 보이는 색상각

    • 네 번째 묶음은 색상각이 약 298~305 범위에 있음
      • 시작 값: oklch(0.891 0.046 305.24)
      • 마지막 값: oklch(0.3601 0.145 298.35)
    • 다섯 번째 묶음은 색상각이 약 258~260 범위에 있음
      • 시작 값: oklch(0.8966 0.046 260.67)
      • 마지막 값: oklch(0.3953 0.15 259.87)

  • 초록·노랑·주황 계열로 보이는 색상각

    • 여섯 번째 묶음은 색상각이 약 144~149 범위에 있음
      • 시작 값: oklch(0.9396 0.05 148.74)
      • 마지막 값: oklch(0.5277 0.138 145.41)
    • 일곱 번째 묶음은 색상각이 약 91~92 범위에 있음
      • 시작 값: oklch(0.9705 0.039 91.2)
      • 마지막 값: oklch(0.6229 0.097 91.9)
    • 여덟 번째 묶음은 색상각이 약 51~57 범위에 있음
      • 시작 값: oklch(0.9383 0.037 56.93)
      • 마지막 값: oklch(0.5249 0.113 51.98)

사용 시 확인할 점

  • 각 색상 묶음의 색상 이름은 제공되지 않음
  • 테마 적용 예시, 코드 샘플, 다운로드 방식, 라이선스 정보는 포함되어 있지 않음
  • 실사용자는 목록의 oklch() 값을 직접 복사해 팔레트나 테마 구성에 사용해야 함

함께 보면 좋은 글 β

GN⁺   [-]
Hacker News 의견들

  • 오늘 oklch() 를 알게 됨
    https://developer.mozilla.org/en-US/docs/Web/CSS/color_value...

  • 왜 uchu라는 단어를 썼는지 궁금함
    요즘 색 구성, AI 모델, 스타트업, 도구, 앱 등 거의 모든 게 무작위로 고른 일본어 단어 하나로 이름 붙는 것 같은데, 왜 그런지 모르겠음

    • 부정적으로 들리긴 싫지만, 이제는 좀 과하게 쓰이는 느낌임
      재미있게도 일본에서도 무작위로 고른 듯한 영어 단어로 같은 일이 벌어지니, 완전히 전례 없는 일은 아닌 듯함
    • Galaxy나 Forester 같은 제품명도 거슬리는지 궁금함
      한 단어짜리 제품명에 불평하는 게 꽤 이상하게 보임. 문제는 단어의 출처 언어인지, Navigator 같은 긴 단어 대신 두 음절 단어를 쓰는 게 질투나는 건지, Chrome처럼 한 음절이 아니라서 마음에 안 드는 건지 모르겠음
      Ubuntu는 일본어가 아니라 괜찮은지, 아니면 Twitter나 Yahoo 같은 이름도 퇴출하고 전부 X처럼 한 글자로 가야 한다는 뜻인지 궁금함
    • “uchū”는 일본어로 우주라는 뜻임
      이 테마를 모든 프로젝트에 쓰니까, 말하자면 범용적이라는 의미임
      다른 사례까지는 모르겠지만, 개인적으로 일본 스타일이나 미감 같은 걸 좋아해서 잘 맞는 단어라면 쓰려고 함
    • 짧고 발음 가능한 단어는 드묾
      4~6글자 프로젝트명을 원하면 일본어 단어가 조건에 잘 맞는 경우가 많고, 일본 문화도 해외에 매우 잘 퍼져 있음
    • 젊은 세대가 애니메이션 같은 일본 문화, 비디오게임, 비복고적 문화 참조에 더 익숙하게 자라면서, 듣기 좋다고 느끼는 단어로 이름을 붙이는 듯함

  • 이걸로 가독성 분석을 해봤는지 궁금함
    배경과 전경의 대비가 너무 낮아서 장시간 읽기에는 편하지 않아 보임

    • 요즘은 가독성에 너무 초점을 맞추는 것 같음
      직장에 새 팀이 생겨서 읽기 어려움이 있는 사람들을 위해 모든 대비를 측정하게 만들고 있음. 대비는 80% 이상이어야 한다든가, 글자 크기도 엄청 커야 하고, 테마 변경도 못 하게 하며, “보안상” Dark Reader 같은 플러그인 설치도 금지함
      문제는 그 결과물이 다른 사람들에게는 아주 못생기고 눈이 피로해진다는 점임. 이제 Dark Reader도 못 쓰니 더 심함. 모든 게 굵고 소리치는 듯해서 어디가 중요한지 구분하기도 더 어려워짐. 470만 색상 디스플레이를 사서 10가지 색만 보려고 한 게 아님. 아주 높은 대비에서는 두통이 생기는 편이라 Solarized 같은 부드러운 테마가 더 좋음
      시각 문제가 있는 직원 0.5%는 각자 문제에 맞게 조정하는 브라우저 플러그인으로도 충분히 도움받을 수 있음. 시각 어려움도 다 같은 게 아님. 어떤 사람은 특정 색 조합을 못 보니 피하거나 수정해야 하고, 어떤 사람은 흐릿하게 보니 큰 글자가 필요한데 지금보다 훨씬 더 커야 할 수도 있음. 전혀 못 보는 사람에게는 이것도 도움이 안 되고 점자 표시기와 좋은 이미지 대체 텍스트가 필요함. 그런데 회사에서는 그런 건 신경 안 쓰고, 눈에 확 띄는 것만 신경 쓰는 듯함
      예전에는 부드러운 이메일 서명이 있었는데 이제는 유치원 색깔과 거대한 글자로 너무 들이댐. 어차피 아무도 읽지 않는 정보인데 말임. 일부러 덜 강조했던 이유가 있었고, 필요하면 거기 있다는 건 알되 중요한 정보는 아니라고 알 수 있게 했던 것임. 정말 읽고 싶으면 선택해서 보면 되고, 일반 텍스트 모드로 바꿀 수도 있음
      장애 지원에 반대하는 건 전혀 아니지만, 더 맞춤형 접근을 보고 싶음. 하나를 고치려다 나머지 모두에게 망가뜨리는 방식은 싫음. 내 휴대폰도 거대한 글자 모드로 쓰지는 않지만, 필요한 사람에게 그 기능이 있는 건 좋다고 봄
    • 대비라면 색상 견본 영역을 말하는 건지 궁금함
      그렇다면 작은 색상 값들은 정보 전달보다는 시각적 용도에 가깝고, 저장소에는 값이 읽기 쉬운 형태로 있음. 예를 들어 밝은 주황 글자를 주황 배경 위에서 한 문단 넘게 읽고 싶지는 않을 것임

  • 색 구성이라는 표현이 헷갈림
    내게 색 구성은 Monokai처럼 서로 잘 어울리는 소수의 색을 뜻함. 코드 편집기 구문 강조 같은 적용처도 명확하고 쉬움
    이건 단색 계열 색이 아주 많은 목록처럼 보이는데, 어떻게 써야 하는지 모르겠음. 깎아내리려는 게 아니라 정말 헷갈림

    • 이건 Tailwind가 UI 개발에 쓸 수 있는 완전한 색상 팔레트를 제공하는 방식과 비슷함
      같은 색상의 여러 명도 단계가 있으면 같은 계열처럼 느껴지고 서로 잘 맞는 UI 요소를 만들 수 있어 유연함. 예를 들어 파란 카드에 파란 계열 테두리를 쓰고 싶다면, 배경에는 더 밝은 파랑을 쓰고 테두리에는 더 어두운 파랑을 쓸 수 있음
      검은색 테두리에 투명도를 입히는 대신, 이 팔레트의 각 명도 단계는 같은 색상 계열 안에서 어울리도록 개별적으로 선택된 것임. 또 다른 장점은 각 “명도 단계”가 색상 간에 일관적이라고 보장할 수 있다는 점임. 50% 회색은 50% 빨강과 비슷한 위치에 있음
      더 일반적으로는 여기 있는 각 색상이 다른 모든 색상과 잘 어울리도록 설계된 것임. 아무 색이나 되는 게 아니라 서로 조화돼야 함
    • 색상 팔레트라고 부르는 게 더 정확함
    • 개인적으로도 “색상 팔레트”라고 했어야 한다고 봄. 비슷한 예시는 다음과 같음
      OpenProps의 Open Color https://yeun.github.io/open-color/
      Tailwind의 색상 팔레트 https://tailwindcss.com/docs/colors
      디자인 관점에서 색상 팔레트는 좋은 색 대비 점수와 다른 접근성 기준을 유지하면서 고르기가 매우 어려울 수 있음. 표준화된 팔레트는 그 작업을 대신해주기 때문에 유용함. OC나 Tailwind 팔레트를 자주 쓰지만 원하는 색상 계열이 부족할 때가 많아서, 이런 선택지가 3개 있는 건 꽤 좋음
    • 사실상 색깔 상자 목록이 476점을 받는다는 게 똑같이 이해가 안 됨

  • 이 팔레트는 지각적으로 균일해 보이지 않음
    각 틴트와 흰색/검은색 사이의 대비율이 모든 색상에서 같지 않다는 뜻임. https://huetone.ardov.me/ 에서 분석해봤는지 궁금함

  • 왜 이게 인터넷 애호가를 위한 색 구성인지 궁금함

    • 인터넷을 좋아하고, 멋진 색도 좋아함. 설마 나만 그런 건 아니겠지 ;)

  • 번호끼리 비교하면 파란색이 다른 색보다 훨씬 더 선명하고 불투명해 보임
    모든 5단계를 나란히 비교하면 파랑은 전기처럼 튀는데, 다른 색들은 틴트가 들어간 것처럼 보임
    물론 모니터 감마와 색상 프로필에 따라 다르겠지만, 의도는 각 번호가 순수색에 대해 비슷한 틴트처럼 보이도록 하는 것이었는지 궁금함. 지금은 색 강도 스케일링에 따라 지각상 동등성을 만드는 Munsell Color System 구현이라기보다, 표기만 다른 RGB/CMYK와 비슷한 체계처럼 보임

    • 꼭 그렇지는 않음
      어떤 공식으로 이 색들에 도달한 건 아니고, 그냥 눈으로 보고 나에게 맞을 때까지 조정했음

  • Android의 Firefox에서 보는데 흰 배경에 검은 글자만 보임
    원래는 더 보여야 하는 것 같은데 맞는지 궁금함

    • CSS 중첩[1]을 사용함. SCSS 같은 걸 떠올리면 됨. 완전한 지원에는 Firefox 117과 Chrome 120이 필요함[2]
      [1] https://developer.mozilla.org/en-US/docs/Web/CSS/Nesting_sel...
      [2] https://caniuse.com/css-nesting
    • Linux 데스크톱의 Firefox에서도 같고, JavaScript를 켜도 마찬가지임
      수정: 보아하니 Oklab/oklch() [1]을 쓰는 듯한데, Firefox 113부터 동작해야 한다고 되어 있지만 115에서는 안 되는 것 같음. 아니면 뭔가 다른 요소가 깨뜨리고 있을 수도 있음
      [1] https://developer.mozilla.org/en-US/docs/Web/CSS/color_value...
    • 아래로 스크롤해서 명도별로 묶인 여러 색상 견본 세트가 보이지 않는다면, 제대로 보고 있는 게 아님
      내 Firefox에서는 잘 동작하지만 Android는 쓰지 않음
    • Linux의 Firefox 50에서도 같음
      하위 호환성을 무시하는 사람들을 뭐라고 불러야 할지 모르겠음. 내 사이트는 필요하면 IE6에서도 동작함
    • Chromium PC에서도 같음

  • Tailwind를 쓰지는 않지만, 이런 용도로 Tailwind 팔레트를 써왔음
    https://tailwindcss.com/docs/colors

    • 조심해야 함. Tailwind는 버전 3과 4 사이에서 또 색을 바꿨고, 이게 벌써 세 번째임
      분명히 말해 CSS 라이브러리를 최신 버전으로 올린다고 사이트 전체 색 테마가 은근히 바뀌면 안 되는데, 현실은 그렇지 않음
      그래서 Radix Colors 쪽으로 옮기기 시작했음

  • 색상 간 채도가 일관적이어야 한다는 강한 요구사항은 없겠지만, 내 취향에는 조금 들쭉날쭉해 보임
    어두운 노랑과 주황은 약간 너무 바랜 느낌임
    전체 팔레트는 좋음. 특히 “빨간” 빨강을 피한 점이 마음에 듦. 많은 디자이너가 싫어한다고 생각하는 색임. 눈 색깔과 색 선호의 관계를 다룬 연구가 있으면 보고 싶음
    비슷한 방향이지만 색상 계열이 더 많음: https://www.s-ings.com/scratchpad/oklch-smooth/

    • 노랑과 주황은 확실히 까다로움
      링크 고맙고, 그 색상 계열들이 정말 좋아 보임
답변달기