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

理想のカラーパレットをもとめて / color-palette-name-convention

hiloki
April 26, 2019

理想のカラーパレットをもとめて / color-palette-name-convention

DIST.26 「Webサービスの個性を支えるデザイン」LT

hiloki

April 26, 2019
Tweet

More Decks by hiloki

Other Decks in Design

Transcript

  1. ໋໊ฤ
    ΧϥʔύϨοτΛ΋ͱΊͯ
    ཧ૝ͷ
    DIST.26 | WebαʔϏεͷݸੑΛࢧ͑ΔσβΠϯ 2019.04.26

    View Slide

  2. UXΤϯδχΞ
    αΠόʔΤʔδΣϯτ
    ୩ ୓थ
    CyberAgent Advanced Technology Studio

    View Slide

  3. https://ameblo.jp/shiba-mamehiko/

    View Slide

  4. View Slide

  5. 90
    ੡඼͕޷͖͔Ͳ͏͔
    sec
    %
    90
    ৭͚ͩʹجͮ͘

    View Slide

  6. Ѝ㗯㗙㗹㗦㗮
    COLORS SPEAK ALL LANGUAGES.
    Joseph Addison | English Eessayist
    ԊႧ㘒༑㗙

    View Slide

  7. Θ͔Γ΍໊͍͢લΛఆٛ͢Δ
    ίϯτϥετΛߟྀ͢Δ
    ඞཁͳ৭ΛߜΓࠐΉ

    View Slide

  8. View Slide

  9. blue_500

    View Slide

  10. blue_500
    blue_400
    blue_600

    View Slide

  11. azure_500
    azure_400
    azure_600

    View Slide

  12. primary_base
    primary_light
    primary_heavy

    View Slide

  13. primary_base
    primary_lighter_15
    primary_darker_10

    View Slide

  14. button_primary_base
    button_primary_hover
    button_primary_active

    View Slide

  15. button_primary_base
    button_primary_hover
    button_primary_active
    button_primary_text
    button_primary_text
    button_primary_text

    View Slide

  16. $color_primary: #155AEE;
    $color_primary_light: #4D82F3;
    $color_primary_heavy: #114CCA;
    $button_primary: $color_primary;
    $button_primary_hover: $color_primary_light;
    $button_primary_active: $color_primary_heavy;
    $button_primary_text: #FCFDFD;
    Sass

    View Slide

  17. @mixin button_primary_color {
    background-color: $button_primary;
    color: $button_primary_text; &:hover {
    background-color: $button_primary_hover;
    }
    &:active {
    background-color: $button_primary_active;
    }
    }
    Sass

    View Slide

  18. .button {
    @include button_primary_color;
    }
    Sass

    View Slide

  19. .button {
    background-color: #155AEE;
    color: #FCFDFD;
    }
    .button:hover {
    background-color: #4D82F3;
    }
    .button:active {
    background-color: #114CCA;
    }
    CSS

    View Slide

  20. ίϯτϥετൺΛอͭ޻෉Λ͢Δ
    ڞ௨ݴޠͱͯ͠ѻ͍΍໊͍͢લʹ͢Δ
    ύϨοτͰఆٛͨ͠৭Ҏ֎͸࢖Θͳ͍

    View Slide

  21. Thank you
    @hiloki
    @shiba_mamehiko

    View Slide

  22. Special Guest Speaker
    Felix Rieseberg
    and more Speakers!
    https://inside-frontend.com/

    View Slide