Upgrade to Pro — share decks privately, control downloads, hide ads and more …

"相対色構文 × oklch" が簡易的なカラーパレットづくりに便利な件

honey32
September 05, 2024

"相対色構文 × oklch" が簡易的なカラーパレットづくりに便利な件

フロントエンドカンファレンス北海道2024アフタートーク Online https://yumemi.connpass.com/event/327628/

の登壇資料です。

honey32

September 05, 2024
Tweet

More Decks by honey32

Other Decks in Programming

Transcript

  1. IPOFZ ͸ʹʔ͞Μʹʔ • גࣜձࣾΏΊΈ ೥ೖࣾ • ϑϩϯτΤϯυΤϯδχΞ ςοΫϦʔυʢ3FBDUത࢜ʣ • (JU)VC2JJUB

    ;FOO $PTFOTF ΞΧ΢ϯτIPOFZ • 9BLBUXJUUFSͷΈ !IPOFZ • 4DBMB ͱ ,PUMJOʹҭͯΒΕͨ 3FBDUΤϯδχΞͰ͢
  2. ͍͍ͩͨ͜Μͳ಺༰ ૬ର৭ߏจͱPLMDIΛซ༻͢Δͱʜ  5BJMXJOE౳ʹ͋ΔΑ͏ͳΧϥʔύϨοτΛࣗ࡞Ͱ͖Δ • ৭૬ͷ஋ʢඇ௚ײతͰ֮͑ͮΒ͍ʣͰ͸ͳ͘ɺΩʔϫʔυʢXIJUF  CMVF DZBOʜʣͰϕʔεʹͳΔ৭ΛܾఆͰ͖Δ •

    -500 ͱ͔ -700 Έ͍ͨͳ਺஋Ͱɺҧ࿨ײͳ͘τʔϯΛௐ੔Ͱ͖Δ  ň͋Δ৭ʹج͍ͮͯ৭Λੜ੒͢Δʼnॲཧ͕ +4ൈ͖Ͱ࣮૷Ͱ͖Δ • ࠷ѱɺ+4Ͱ࣮૷Ͱ͖Δ͚ͲͶʜ
  3. ࢹ֮తʹۉ౳ͳΧϥʔύϨοτΛࣗ࡞͢Δ 5BJMXJOEͷΧϥʔύϨοτ͸ ྑ͍ײ͡ʹ੔͑ΒΕͯΔ Tailwind includes an expertly-crafted default color palette

    out-of-the-box that is a great starting point if you don’t have your own specific branding in mind. https://tailwindcss.com/docs/customizing-colors#default-color- palette ΑΓҾ༻ɻӈͷը૾΋ɺಉϖʔδͷεΫϦʔϯγϣοτ (PPHMF຋༁ ˠ 5BJMXJOEʹ͸ɺઐ໳Ո͕࡞੒͙ͨ͢͠ʹ࢖͑ΔσϑΥϧτͷΧϥʔύ Ϩοτؚ͕·Ε͓ͯΓɺಠࣗͷϒϥϯυΛ೦಄ʹஔ͍͍ͯͳ͍৔߹ͷग़ൃ఺ͱͯ͠࠷ద Ͱ͢ɻ ڧௐ͸චऀʹΑΔ
  4. ࢹ֮తʹۉ౳ͳΧϥʔύϨοτΛࣗ࡞͢Δ ͳͥ PLMDIʁ ˠ ૉਓ͕ ITM Λ࢖ͬͯ΋ਅࣅͰ͖ͳ͍ ITM Ͱ͸ɺ-͕ݪ৭ ʮײ֮తʹ͸҉͍ʯ७ਮͳ੨΋

    ʮײ֮తʹ͸໌Δ͍ʯ७ਮͳԫ৭΋ ✅ 3(#ͱͷ ରԠؔ܎͕෼͔Γ΍͍͢ 🤔 ࢦఆͨ͠਺஋ ࣮ࡍͷ৭ͷ Ϊϟοϓ͕͋Δ
  5. ࢹ֮తʹۉ౳ͳΧϥʔύϨοτΛࣗ࡞͢Δ ͳͥ PLMDIʁ ˠ ૉਓ͕ ITM Λ࢖ͬͯ΋ਅࣅͰ͖ͳ͍ 🤔 ࢦఆͨ͠਺஋ ࣮ࡍͷ৭ͷ

    Ϊϟοϓ͕͋Δ $ISPNFΛ࢖༻  DevTools > Rendering > Emulate vision deficiencies Ͱ "DISPNBUPQTJB OPDPMPS Λબ୒͢Δ ͜ͱͰάϨʔεέʔϧԽͨ͠΋ͷ
  6. ࢹ֮తʹۉ౳ͳΧϥʔύϨοτΛࣗ࡞͢Δ ༨ஊ-ɺ࣮ڍಈ͕ࢥͬͯͨͷͱҧ͏ -ͩͱਅͬനʹͳΓͦ͏ͳͷʹɺϒϥ΢β্Ͱ͸ͦ͏ͳΒͳ͍ɻͳͥʁ • https://oklch.com ͷΧϥʔϐοΧʔͩͱɺਅͬനʹͳΔ • $448(ͷ࢓༷ॻ΋ʮਅͬനʹͳΔʯͱݴͬͯΔͬΆ͍͕ʜ If the

    chroma of an Oklch color is 0% or 0, the hue component is powerless. If the lightness of an Oklch color is 0% or 0, or 100% or 1.0, the color will be displayed as black, or white, respectively due to gamut mapping to the display. https://drafts.csswg.org/css-color/#specifying-oklab-oklch 黄マーカーは筆者
  7. ࢹ֮తʹۉ౳ͳΧϥʔύϨοτΛࣗ࡞͢Δ ͳͥ૬ର৭ߏจʁ oklch(from cyan 0.6 c h) ˠ ʮΩʔϫʔυ৭ DZBO

    ʹج͍ͮͯɺl Λ 0.6 ʹมߋɻ c ͱ h ͸ͦͷ··ʯˠ ʮ৭ 㲗 ৭૬ͷ஋ʯͷϚοϐϯάΛ҉هͤͣͱ΋ಡΈॻ͖Ͱ͖Δʂ Mͱ Dͷௐ੔͚ͩͰɺཉ͍͠τʔϯͷ৭͕ಘΒΕΔ ΋ͱʹͳΔ৭ l c h
  8. ࢹ֮తʹۉ౳ͳΧϥʔύϨοτΛࣗ࡞͢Δ ͳͥ૬ର৭ߏจʁ ʕ$44ม਺ͱ΋૊Έ߹ΘͤՄೳ --c-bg-color: oklch(from cyan 0.6 c h); --c-bg-color-hover:

    oklch(from var(--c-bg-color) calc(1 + 0.05) c h) ʮ΋ͱʹͳΔ৭͔Βগ͚ͩ͠มߋʯ͕௚ײతʹॻ͚Δ ͔͠΋ɺόϦΞϯτʹΑͬͯ --c-bg-color ͕มΘΔ৔߹Ͱ΋ɺ ϗόʔ࣌ͷ৭ͷมԽͷ͔͕ͨ͠Ұ؏͍ͯ͠Δ .BUFSJBM%FTJHOͷʮςʔϚΧϥʔΛϢʔβʔ͕ΧελϚΠζͰ͖Δʯػ ೳͷΑ͏ʹɺಈతͳ৭ʹ΋ରԠͰ͖Δɻ ྫʮϘλϯʹϗόʔͨ͠ͱ͖͸ɺ΋ͱͷ৭ΑΓ໌౓Λগ্͚ͩ͛͠Δʯ
  9. ࢹ֮తʹۉ౳ͳΧϥʔύϨοτΛࣗ࡞͢Δ ͳͥ૬ର৭ߏจʁ ʕෆಁ໌౓΋ૢ࡞Ͱ͖Δ oklch(from white l c h / 0.8)

    ˠ ʮΩʔϫʔυ৭ XIJUFʹج͍ͮͯɺෆಁ໌౓͚ͩ 0.8 ʹมߋʯ XIJUFˠ 255,255,255 CMBDLˠ 0,0,0 ͷॻ͖׵͑·ͰαϘΕΔɻ ˠ ಡΉਓ͔Βݟͯ΋ɺҙਤ͕ΑΓ໌֬ʹͳΔ ΋ͱʹͳΔ৭ l c h / alpha rgba(255, 255, 255, 0.8) #&'03&
  10. ࢹ֮తʹۉ౳ͳΧϥʔύϨοτΛࣗ࡞͢Δ ͳͥ૬ର৭ߏจʁ ʕ$44ม਺ º ෆಁ໌౓ oklch(from var(--color-background-base) l c h

    / 0.8) ˠ ʮ$44ม਺ʹج͍ͮͯɺෆಁ໌౓͚ͩ 0.8 ʹมߋʯ ʮϞʔμϧͷഎܠ৭͸ɺجຊతͳഎܠͷ৭ʢϥΠτ μʔΫͰ੾ΓସΘ ΔʣΛϕʔεʹ͢ΓΨϥεޮՌΛ͚ͭΔʯΈ͍ͨͳέʔεʹద͍ͯ͠Δ ΋ͱʹͳΔ৭ l c h / alpha PQBDJUZͩͱɺจࣈ΍ը૾ͳͲͷίϯςϯπ· Ͱ൒ಁ໌ʹͳΔʜ
  11. ·ͱΊ ૬ର৭ߏจͱPLMDIΛซ༻͢Δͱʜ  5BJMXJOE౳ʹ͋ΔΑ͏ͳΧϥʔύϨοτΛࣗ࡞Ͱ͖Δ • ૬ର৭ߏจͳͷͰɺ৭૬Ͱ͸ͳ͘ΩʔϫʔυͰجຊͷ৭ΛܾఆͰ͖Δ • ͋ͱ͸τʔϯΛܾఆ͢Δ͚ͩɻPLMDI ͳͷͰɺ l

    ͱ c ͔Β࣮ࡍͷݟ͑ํ͕༧ظ͠΍͘͢ɺҧ࿨ײ͕গͳ͍  ň͋Δ৭ʹج͍ͮͯ৭Λੜ੒͢Δʼnॲཧ͕ +4ൈ͖Ͱ࣮૷Ͱ͖Δ • ࠷ѱɺ+4Ͱ࣮૷Ͱ͖Δ͚ͲͶʜ --c-bg-color: oklch(from cyan 0.6 c h); --c-bg-color-hover: oklch(from var(--c-bg-color) calc(1 + 0.05) c h)
  12. ͦͷଞࢀߟࢿྉɾπʔϧ౳ • ΧϥʔύϨοτͷίϯτϥετൺΛଗ͑Δͷʹ0,-$)Χϥʔ εϖʔε͕ศརͩͬͨ cOPUF https://note.com/yotsukura/n/n89997b613d2f • OKLCH in CSS:

    why we moved from RGB and HSL | Evil Martians https://evilmartians.com/chronicles/oklch-in-css-why- quit-rgb-hsl • OKLCH Color Picker & Converter https://oklch.com • ৭ c8JLJQFEJB https://ja.wikipedia.org/wiki/%E8%89%B2