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

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

の登壇資料です。

Transcript

1. ૬ର৭ߏจ ºPLMDI͕ ؆қతͳΧϥʔύϨοτ ͮ͘Γʹศརͳ݅ IPOFZ :6.&.*
   *OD 
2. IPOFZ ͸ʹʔ͞Μʹʔ • גࣜձࣾΏΊΈ ೥ೖࣾ • ϑϩϯτΤϯυΤϯδχΞ 
   ςοΫϦʔυʢ3FBDU
   ത࢜ʣ • (JU)VC
   
   2JJUB 
   ;FOO 
   $PTFOTF ΞΧ΢ϯτ
   IPOFZ • 9
   BLB
   UXJUUFS
   ͷΈ !IPOFZ • 4DBMB ͱ ,PUMJO
   ʹҭͯΒΕͨ 3FBDU
   ΤϯδχΞͰ͢
3. ͍͍ͩͨ͜Μͳ಺༰ ૬ର৭ߏจͱPLMDIΛซ༻͢Δͱʜ  5BJMXJOE
   ౳ʹ͋ΔΑ͏ͳΧϥʔύϨοτΛࣗ࡞Ͱ͖Δ • ৭૬ͷ஋ʢඇ௚ײతͰ֮͑ͮΒ͍ʣͰ͸ͳ͘ɺΩʔϫʔυʢXIJUF
   CMVF
   DZBOʜʣͰϕʔεʹͳΔ৭ΛܾఆͰ͖Δ • -500 ͱ͔ -700 Έ͍ͨͳ਺஋Ͱɺҧ࿨ײͳ͘τʔϯΛௐ੔Ͱ͖Δ  ň͋Δ৭ʹج͍ͮͯ৭Λੜ੒͢Δʼnॲཧ͕ +4
   ൈ͖Ͱ࣮૷Ͱ͖Δ • ࠷ѱɺ+4
   Ͱ࣮૷Ͱ͖Δ͚ͲͶʜ
4. લఏ • े෼ͳཪऔΓΛ͍ͯ͠ͳͯ͘ո͍͠Օॴ͕͋Δ • ৭ͷཧ࿦͕བྷΉ • ࢓༷ͷΦϨΦϨղऍͱϒϥ΢βͷڍಈ͕৯͍ҧͬͯΔʁ • ࠓ͙࣮͢຿Ͱ࢖͏͜ͱɺσβΠφrΤϯδχΞ࿈ܞ͸೦಄ʹஔ ͍͍ͯͳ͍ • ϓϩτλΠϓɾݸਓ։ൃ޲͚ • ϒϥ΢βαϙʔτ͕·ͪ·ͪɺ'JHNB
   Ͱ΋ະαϙʔτ
5. ࢹ֮తʹۉ౳ͳΧϥʔύϨοτΛࣗ࡞͢Δ ৭ͷࡾଐੑʮ৭૬ʯʮ࠼౓ʯʮ໌౓ʯ ৭૬ )VF ʜͲͷ৭͔ ࠼౓ $ISPNB
   4BUVSBUJPO
   ʜ৭ຯ͕ͲΕ͚ͩڧ͍͔ ໌౓ #SJHIUOFTT
   -VNJOPTJUZ
   ʜͲΕ͚ͩ໌Δ͍͔ ·ͱΊͯ τʔϯ 5POF
6. ࢹ֮తʹۉ౳ͳΧϥʔύϨοτΛࣗ࡞͢Δ 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
   ʹ͸ɺઐ໳Ո͕࡞੒͙ͨ͢͠ʹ࢖͑ΔσϑΥϧτͷΧϥʔ
   ύ Ϩοτؚ͕·Ε͓ͯΓɺಠࣗͷϒϥϯυΛ೦಄ʹஔ͍͍ͯͳ͍৔߹ͷग़ൃ఺ͱͯ͠࠷ద Ͱ͢ɻ ڧௐ͸චऀʹΑΔ
7. ࢹ֮తʹۉ౳ͳΧϥʔύϨοτΛࣗ࡞͢Δ ͳͥ PLMDIʁ ˠ ૉਓ͕ ITM Λ࢖ͬͯ΋ਅࣅͰ͖ͳ͍ ITM Ͱ͸ɺ-
   ͕ݪ৭ ʮײ֮తʹ͸҉͍ʯ७ਮͳ੨΋ ʮײ֮తʹ͸໌Δ͍ʯ७ਮͳԫ৭΋ ✅ 3(#ͱͷ ରԠؔ܎͕෼͔Γ΍͍͢ 🤔 ࢦఆͨ͠਺஋ 
   ࣮ࡍͷ৭ͷ Ϊϟοϓ͕͋Δ
8. ࢹ֮తʹۉ౳ͳΧϥʔύϨοτΛࣗ࡞͢Δ ͳͥ PLMDIʁ ˠ ૉਓ͕ ITM Λ࢖ͬͯ΋ਅࣅͰ͖ͳ͍ 🤔 ࢦఆͨ͠਺஋ 
   ࣮ࡍͷ৭ͷ Ϊϟοϓ͕͋Δ $ISPNF
   Λ࢖༻
   DevTools > Rendering > Emulate vision deficiencies Ͱ "DISPNBUPQTJB OP
   DPMPS
   Λબ୒͢Δ ͜ͱͰάϨʔεέʔϧԽͨ͠΋ͷ
9. ࢹ֮తʹۉ౳ͳΧϥʔύϨοτΛࣗ࡞͢Δ ͳͥ PLMDIʁ ˠ ࢦఆͨ͠਺஋͕ݟͨ໨ͷ৭ʹΩϨΠʹରԠ͢Δ
10. ࢹ֮తʹۉ౳ͳΧϥʔύϨοτΛࣗ࡞͢Δ ͳͥ PLMDIʁ ˠ ࢦఆͨ͠਺஋͕ݟͨ໨ͷ৭ʹΩϨΠʹରԠ͢Δ
11. ࢹ֮తʹۉ౳ͳΧϥʔύϨοτΛࣗ࡞͢Δ ͳͥ PLMDIʁ ˠ ࢦఆͨ͠਺஋͕ݟͨ໨ͷ৭ʹΩϨΠʹରԠ͢Δ ಛʹɺ࠼౓ΛԼ͛ͨͱ͖ʢD
    ͷ࠷ߴ͸ 
    ͳͷͰ 
    ૬౰ʣ -
    ະຬ͸ײ֮తͳ໌Δ͞ͷόϥπΩ͕ۃΊͯগͳ͍ ʢ࣮༻తʹ͸ɺͦ΋ͦ΋ߴ࠼౓ͷ৭͸ͦ΋ͦ΋ଟ༻͠ͳ͍ʣ লུ͚ͨ͠Ͳɺจࣈͱഎܠͷίϯτϥετ֬อʹ΋ʢ͋Δఔ౓ʁʣ࢖͑Δ
12. ࢹ֮తʹۉ౳ͳΧϥʔύϨοτΛࣗ࡞͢Δ ༨ஊ
    -ɺ࣮ڍಈ͕ࢥͬͯͨͷͱҧ͏ -
    ͩͱਅͬനʹͳΓͦ͏ͳͷʹɺϒϥ΢β্Ͱ͸ͦ͏ͳΒͳ͍ɻͳͥʁ • 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 黄マーカーは筆者
13. ࢹ֮తʹۉ౳ͳΧϥʔύϨοτΛࣗ࡞͢Δ ͳͥ૬ର৭ߏจʁ oklch(from cyan 0.6 c h) ˠ ʮΩʔϫʔυ৭ DZBO ʹج͍ͮͯɺl Λ 0.6 ʹมߋɻ c ͱ h ͸ͦͷ··ʯˠ ʮ৭ 㲗 ৭૬ͷ஋ʯͷϚοϐϯάΛ҉هͤͣͱ΋ಡΈॻ͖Ͱ͖Δʂ M
    ͱ D
    ͷௐ੔͚ͩͰɺཉ͍͠τʔϯͷ৭͕ಘΒΕΔ ΋ͱʹͳΔ৭ l c h
14. ࢹ֮తʹۉ౳ͳΧϥʔύϨοτΛࣗ࡞͢Δ ͳͥ૬ର৭ߏจʁ ʕ
    $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
    
    ͷʮςʔϚΧϥʔΛϢʔβʔ͕ΧελϚΠζͰ͖Δʯػ ೳͷΑ͏ʹɺಈతͳ৭ʹ΋ରԠͰ͖Δɻ ྫʮϘλϯʹϗόʔͨ͠ͱ͖͸ɺ΋ͱͷ৭ΑΓ໌౓Λগ্͚ͩ͛͠Δʯ
15. ࢹ֮తʹۉ౳ͳΧϥʔύϨοτΛࣗ࡞͢Δ ͳͥ૬ର৭ߏจʁ ʕ
    ෆಁ໌౓΋ૢ࡞Ͱ͖Δ 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&
16. ࢹ֮తʹۉ౳ͳΧϥʔύϨοτΛࣗ࡞͢Δ ͳͥ૬ର৭ߏจʁ ʕ
    $44ม਺ º ෆಁ໌౓ oklch(from var(--color-background-base) l c h / 0.8) ˠ ʮ$44
    ม਺ʹج͍ͮͯɺෆಁ໌౓͚ͩ 0.8 ʹมߋʯ ʮϞʔμϧͷഎܠ৭͸ɺجຊతͳഎܠͷ৭ʢϥΠτ 
    μʔΫͰ੾ΓସΘ ΔʣΛϕʔεʹ͢ΓΨϥεޮՌΛ͚ͭΔʯΈ͍ͨͳέʔεʹద͍ͯ͠Δ ΋ͱʹͳΔ৭ l c h / alpha PQBDJUZ
    ͩͱɺจࣈ΍ը૾ͳͲͷίϯςϯπ· Ͱ൒ಁ໌ʹͳΔʜ
17. ·ͱΊ ૬ର৭ߏจͱ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)
18. ͦͷଞࢀߟࢿྉɾπʔϧ౳ • ΧϥʔύϨοτͷίϯτϥετൺΛଗ͑Δͷʹ0,-$)Χϥʔ εϖʔε͕ศརͩͬͨ c
    OPUF 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 • ৭ c
    8JLJQFEJB
    https://ja.wikipedia.org/wiki/%E8%89%B2
19. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ גࣜձࣾΏΊΈ ίʔϙϨʔταΠτ https://www.yumemi.co.jp/ :6.&.*
    *OD