v7.1.0

Color

Table of Contents

Detail

MIXTONE の MOFTONE をベースとした全体で利用可能な色変数。

Warning

_color.scss のオーバーライドは影響範囲が大きすぎるため推奨しません。プロジェクトで色を変更する場合は、Theme Common・Theme Light・Theme Dark の変数またはスタイル内の変数を上書きすることをオススメします。

Variables

Name
Default Value
Compiled Value
  • Name
    $red-50
    Default Value
    hsl(0, 65%, 95%)
    Compiled Value
    #fbeaea
  • Name
    $red-100
    Default Value
    hsl(0, 65%, 89%)
    Compiled Value
    #f5d1d1
  • Name
    $red-200
    Default Value
    hsl(0, 65%, 81%)
    Compiled Value
    #eeafaf
  • Name
    $red-300
    Default Value
    hsl(0, 65%, 74%)
    Compiled Value
    #e89292
  • Name
    $red-400
    Default Value
    hsl(0, 65%, 67%)
    Compiled Value
    #e27474
  • Name
    $red-500
    Default Value
    hsl(0, 65%, 60%)
    Compiled Value
    #db5757
  • Name
    $red-600
    Default Value
    hsl(0, 65%, 53%)
    Compiled Value
    #d53939
  • Name
    $red-700
    Default Value
    hsl(0, 65%, 46%)
    Compiled Value
    #c22929
  • Name
    $red-800
    Default Value
    hsl(0, 65%, 39%)
    Compiled Value
    #a42323
  • Name
    $red-900
    Default Value
    hsl(0, 65%, 32%)
    Compiled Value
    #871d1d
  • Name
    $red-a100
    Default Value
    hsl(0, 90%, 85%)
    Compiled Value
    #fbb6b6
  • Name
    $red-a200
    Default Value
    hsl(0, 90%, 77%)
    Compiled Value
    #f99090
  • Name
    $red-a400
    Default Value
    hsl(0, 90%, 63%)
    Compiled Value
    #f64c4c
  • Name
    $red-a700
    Default Value
    hsl(0, 90%, 42%)
    Compiled Value
    #cb0b0b
  • Name
    $pink-50
    Default Value
    hsl(340, 60%, 93%)
    Compiled Value
    #f8e2ea
  • Name
    $pink-100
    Default Value
    hsl(340, 60%, 89%)
    Compiled Value
    #f4d2dd
  • Name
    $pink-200
    Default Value
    hsl(340, 60%, 81%)
    Compiled Value
    #ecb1c5
  • Name
    $pink-300
    Default Value
    hsl(340, 60%, 72%)
    Compiled Value
    #e28da9
  • Name
    $pink-400
    Default Value
    hsl(340, 60%, 63%)
    Compiled Value
    #d9688e
  • Name
    $pink-500
    Default Value
    hsl(340, 60%, 55%)
    Compiled Value
    #d14775
  • Name
    $pink-600
    Default Value
    hsl(340, 60%, 50%)
    Compiled Value
    #cc3366
  • Name
    $pink-700
    Default Value
    hsl(340, 60%, 45%)
    Compiled Value
    #b82e5c
  • Name
    $pink-800
    Default Value
    hsl(340, 60%, 39%)
    Compiled Value
    #9f2850
  • Name
    $pink-900
    Default Value
    hsl(340, 60%, 32%)
    Compiled Value
    #832141
  • Name
    $pink-a100
    Default Value
    hsl(340, 85%, 85%)
    Compiled Value
    #f9b8ce
  • Name
    $pink-a200
    Default Value
    hsl(340, 85%, 77%)
    Compiled Value
    #f692b4
  • Name
    $pink-a400
    Default Value
    hsl(340, 85%, 59%)
    Compiled Value
    #ef3e79
  • Name
    $pink-a700
    Default Value
    hsl(340, 85%, 41%)
    Compiled Value
    #c1104b
  • Name
    $purple-50
    Default Value
    hsl(290, 37%, 92%)
    Compiled Value
    #f0e3f2
  • Name
    $purple-100
    Default Value
    hsl(290, 37%, 86%)
    Compiled Value
    #e4cee9
  • Name
    $purple-200
    Default Value
    hsl(290, 37%, 74%)
    Compiled Value
    #cda4d5
  • Name
    $purple-300
    Default Value
    hsl(290, 37%, 62%)
    Compiled Value
    #b67ac2
  • Name
    $purple-400
    Default Value
    hsl(290, 37%, 52%)
    Compiled Value
    #a357b2
  • Name
    $purple-500
    Default Value
    hsl(290, 37%, 45%)
    Compiled Value
    #8f489d
  • Name
    $purple-600
    Default Value
    hsl(290, 37%, 38%)
    Compiled Value
    #793d85
  • Name
    $purple-700
    Default Value
    hsl(290, 37%, 33%)
    Compiled Value
    #693573
  • Name
    $purple-800
    Default Value
    hsl(290, 37%, 29%)
    Compiled Value
    #5c2f65
  • Name
    $purple-900
    Default Value
    hsl(290, 37%, 25%)
    Compiled Value
    #4f2857
  • Name
    $purple-a100
    Default Value
    hsl(290, 57%, 82%)
    Compiled Value
    #e3b7eb
  • Name
    $purple-a200
    Default Value
    hsl(290, 57%, 70%)
    Compiled Value
    #d087de
  • Name
    $purple-a400
    Default Value
    hsl(290, 57%, 52%)
    Compiled Value
    #b33fca
  • Name
    $purple-a700
    Default Value
    hsl(290, 57%, 37%)
    Compiled Value
    #822994
  • Name
    $deep-purple-50
    Default Value
    hsl(260, 30%, 92%)
    Compiled Value
    #e9e4f1
  • Name
    $deep-purple-100
    Default Value
    hsl(260, 30%, 85%)
    Compiled Value
    #d5cde4
  • Name
    $deep-purple-200
    Default Value
    hsl(260, 30%, 75%)
    Compiled Value
    #b9acd2
  • Name
    $deep-purple-300
    Default Value
    hsl(260, 30%, 66%)
    Compiled Value
    #a08ec2
  • Name
    $deep-purple-400
    Default Value
    hsl(260, 30%, 57%)
    Compiled Value
    #8670b2
  • Name
    $deep-purple-500
    Default Value
    hsl(260, 30%, 50%)
    Compiled Value
    #7359a6
  • Name
    $deep-purple-600
    Default Value
    hsl(260, 30%, 45%)
    Compiled Value
    #675095
  • Name
    $deep-purple-700
    Default Value
    hsl(260, 30%, 39%)
    Compiled Value
    #5a4681
  • Name
    $deep-purple-800
    Default Value
    hsl(260, 30%, 33%)
    Compiled Value
    #4c3b6d
  • Name
    $deep-purple-900
    Default Value
    hsl(260, 30%, 28%)
    Compiled Value
    #40325d
  • Name
    $deep-purple-a100
    Default Value
    hsl(260, 55%, 81%)
    Compiled Value
    #c6b4e9
  • Name
    $deep-purple-a200
    Default Value
    hsl(260, 55%, 71%)
    Compiled Value
    #a78cde
  • Name
    $deep-purple-a400
    Default Value
    hsl(260, 55%, 57%)
    Compiled Value
    #7d55ce
  • Name
    $deep-purple-a700
    Default Value
    hsl(260, 55%, 45%)
    Compiled Value
    #5e34b2
  • Name
    $indigo-50
    Default Value
    hsl(230, 30%, 92%)
    Compiled Value
    #e4e7f1
  • Name
    $indigo-100
    Default Value
    hsl(230, 30%, 85%)
    Compiled Value
    #cdd1e4
  • Name
    $indigo-200
    Default Value
    hsl(230, 30%, 75%)
    Compiled Value
    #acb3d2
  • Name
    $indigo-300
    Default Value
    hsl(230, 30%, 65%)
    Compiled Value
    #8b94c1
  • Name
    $indigo-400
    Default Value
    hsl(230, 30%, 57%)
    Compiled Value
    #707bb2
  • Name
    $indigo-500
    Default Value
    hsl(230, 30%, 51%)
    Compiled Value
    #5d69a8
  • Name
    $indigo-600
    Default Value
    hsl(230, 30%, 45%)
    Compiled Value
    #505c95
  • Name
    $indigo-700
    Default Value
    hsl(230, 30%, 40%)
    Compiled Value
    #475285
  • Name
    $indigo-800
    Default Value
    hsl(230, 30%, 34%)
    Compiled Value
    #3d4571
  • Name
    $indigo-900
    Default Value
    hsl(230, 30%, 29%)
    Compiled Value
    #343b60
  • Name
    $indigo-a100
    Default Value
    hsl(230, 55%, 78%)
    Compiled Value
    #a8b2e6
  • Name
    $indigo-a200
    Default Value
    hsl(230, 55%, 66%)
    Compiled Value
    #7989d8
  • Name
    $indigo-a400
    Default Value
    hsl(230, 55%, 56%)
    Compiled Value
    #5166cd
  • Name
    $indigo-a700
    Default Value
    hsl(230, 55%, 47%)
    Compiled Value
    #364cba
  • Name
    $blue-50
    Default Value
    hsl(206, 64%, 92%)
    Compiled Value
    #deecf8
  • Name
    $blue-100
    Default Value
    hsl(206, 64%, 85%)
    Compiled Value
    #c0dcf1
  • Name
    $blue-200
    Default Value
    hsl(206, 64%, 78%)
    Compiled Value
    #a3cceb
  • Name
    $blue-300
    Default Value
    hsl(206, 64%, 70%)
    Compiled Value
    #82b9e3
  • Name
    $blue-400
    Default Value
    hsl(206, 64%, 64%)
    Compiled Value
    #68abde
  • Name
    $blue-500
    Default Value
    hsl(206, 64%, 57%)
    Compiled Value
    #4b9bd8
  • Name
    $blue-600
    Default Value
    hsl(206, 64%, 50%)
    Compiled Value
    #2e8ad1
  • Name
    $blue-700
    Default Value
    hsl(206, 64%, 43%)
    Compiled Value
    #2777b4
  • Name
    $blue-800
    Default Value
    hsl(206, 64%, 36%)
    Compiled Value
    #216497
  • Name
    $blue-900
    Default Value
    hsl(206, 64%, 30%)
    Compiled Value
    #1c537d
  • Name
    $blue-a100
    Default Value
    hsl(206, 87%, 78%)
    Compiled Value
    #96cdf8
  • Name
    $blue-a200
    Default Value
    hsl(206, 87%, 68%)
    Compiled Value
    #66b7f4
  • Name
    $blue-a400
    Default Value
    hsl(206, 87%, 54%)
    Compiled Value
    #2497f0
  • Name
    $blue-a700
    Default Value
    hsl(206, 87%, 40%)
    Compiled Value
    #0d72bf
  • Name
    $light-blue-50
    Default Value
    hsl(196, 67%, 92%)
    Compiled Value
    #ddf1f8
  • Name
    $light-blue-100
    Default Value
    hsl(196, 67%, 85%)
    Compiled Value
    #bfe5f2
  • Name
    $light-blue-200
    Default Value
    hsl(196, 67%, 77%)
    Compiled Value
    #9dd7ec
  • Name
    $light-blue-300
    Default Value
    hsl(196, 67%, 68%)
    Compiled Value
    #77c7e4
  • Name
    $light-blue-400
    Default Value
    hsl(196, 67%, 62%)
    Compiled Value
    #5dbcdf
  • Name
    $light-blue-500
    Default Value
    hsl(196, 67%, 53%)
    Compiled Value
    #37add7
  • Name
    $light-blue-600
    Default Value
    hsl(196, 67%, 46%)
    Compiled Value
    #279ac4
  • Name
    $light-blue-700
    Default Value
    hsl(196, 67%, 40%)
    Compiled Value
    #2286aa
  • Name
    $light-blue-800
    Default Value
    hsl(196, 67%, 34%)
    Compiled Value
    #1d7291
  • Name
    $light-blue-900
    Default Value
    hsl(196, 67%, 30%)
    Compiled Value
    #196480
  • Name
    $light-blue-a100
    Default Value
    hsl(196, 87%, 78%)
    Compiled Value
    #96def8
  • Name
    $light-blue-a200
    Default Value
    hsl(196, 87%, 65%)
    Compiled Value
    #58caf3
  • Name
    $light-blue-a400
    Default Value
    hsl(196, 87%, 51%)
    Compiled Value
    #15b5ef
  • Name
    $light-blue-a700
    Default Value
    hsl(196, 87%, 40%)
    Compiled Value
    #0d8fbf
  • Name
    $cyan-50
    Default Value
    hsl(186, 55%, 92%)
    Compiled Value
    #dff4f6
  • Name
    $cyan-100
    Default Value
    hsl(186, 55%, 85%)
    Compiled Value
    #c4eaee
  • Name
    $cyan-200
    Default Value
    hsl(186, 55%, 75%)
    Compiled Value
    #9cdbe2
  • Name
    $cyan-300
    Default Value
    hsl(186, 55%, 65%)
    Compiled Value
    #75cdd7
  • Name
    $cyan-400
    Default Value
    hsl(186, 55%, 55%)
    Compiled Value
    #4dbfcb
  • Name
    $cyan-500
    Default Value
    hsl(186, 55%, 48%)
    Compiled Value
    #37b0be
  • Name
    $cyan-600
    Default Value
    hsl(186, 55%, 41%)
    Compiled Value
    #2f97a2
  • Name
    $cyan-700
    Default Value
    hsl(186, 55%, 36%)
    Compiled Value
    #29848e
  • Name
    $cyan-800
    Default Value
    hsl(186, 55%, 32%)
    Compiled Value
    #25767e
  • Name
    $cyan-900
    Default Value
    hsl(186, 55%, 27%)
    Compiled Value
    #1f636b
  • Name
    $cyan-a100
    Default Value
    hsl(186, 75%, 78%)
    Compiled Value
    #9de9f1
  • Name
    $cyan-a200
    Default Value
    hsl(186, 75%, 65%)
    Compiled Value
    #63dbe9
  • Name
    $cyan-a400
    Default Value
    hsl(186, 75%, 47%)
    Compiled Value
    #1ec0d2
  • Name
    $cyan-a700
    Default Value
    hsl(186, 75%, 38%)
    Compiled Value
    #189baa
  • Name
    $teal-50
    Default Value
    hsl(170, 40%, 92%)
    Compiled Value
    #e2f3f0
  • Name
    $teal-100
    Default Value
    hsl(170, 40%, 84%)
    Compiled Value
    #c6e7e1
  • Name
    $teal-200
    Default Value
    hsl(170, 40%, 74%)
    Compiled Value
    #a2d7ce
  • Name
    $teal-300
    Default Value
    hsl(170, 40%, 64%)
    Compiled Value
    #7ec8bc
  • Name
    $teal-400
    Default Value
    hsl(170, 40%, 54%)
    Compiled Value
    #5bb9a9
  • Name
    $teal-500
    Default Value
    hsl(170, 40%, 46%)
    Compiled Value
    #46a495
  • Name
    $teal-600
    Default Value
    hsl(170, 40%, 41%)
    Compiled Value
    #3f9284
  • Name
    $teal-700
    Default Value
    hsl(170, 40%, 36%)
    Compiled Value
    #378174
  • Name
    $teal-800
    Default Value
    hsl(170, 40%, 32%)
    Compiled Value
    #317267
  • Name
    $teal-900
    Default Value
    hsl(170, 40%, 27%)
    Compiled Value
    #296057
  • Name
    $teal-a100
    Default Value
    hsl(170, 65%, 78%)
    Compiled Value
    #a2ebdf
  • Name
    $teal-a200
    Default Value
    hsl(170, 65%, 65%)
    Compiled Value
    #6ce0cc
  • Name
    $teal-a400
    Default Value
    hsl(170, 65%, 47%)
    Compiled Value
    #2ac6ac
  • Name
    $teal-a700
    Default Value
    hsl(170, 65%, 38%)
    Compiled Value
    #22a08b
  • Name
    $green-50
    Default Value
    hsl(120, 33%, 94%)
    Compiled Value
    #ebf5eb
  • Name
    $green-100
    Default Value
    hsl(120, 33%, 87%)
    Compiled Value
    #d3e9d3
  • Name
    $green-200
    Default Value
    hsl(120, 33%, 77%)
    Compiled Value
    #b1d8b1
  • Name
    $green-300
    Default Value
    hsl(120, 33%, 68%)
    Compiled Value
    #92c892
  • Name
    $green-400
    Default Value
    hsl(120, 33%, 59%)
    Compiled Value
    #74b974
  • Name
    $green-500
    Default Value
    hsl(120, 33%, 52%)
    Compiled Value
    #5cad5c
  • Name
    $green-600
    Default Value
    hsl(120, 33%, 47%)
    Compiled Value
    #509f50
  • Name
    $green-700
    Default Value
    hsl(120, 33%, 41%)
    Compiled Value
    #468b46
  • Name
    $green-800
    Default Value
    hsl(120, 33%, 35%)
    Compiled Value
    #3c773c
  • Name
    $green-900
    Default Value
    hsl(120, 33%, 30%)
    Compiled Value
    #336633
  • Name
    $green-a100
    Default Value
    hsl(120, 58%, 83%)
    Compiled Value
    #bbedbb
  • Name
    $green-a200
    Default Value
    hsl(120, 58%, 73%)
    Compiled Value
    #92e292
  • Name
    $green-a400
    Default Value
    hsl(120, 58%, 59%)
    Compiled Value
    #5ad35a
  • Name
    $green-a700
    Default Value
    hsl(120, 58%, 41%)
    Compiled Value
    #2ca52c
  • Name
    $light-green-50
    Default Value
    hsl(90, 45%, 93%)
    Compiled Value
    #edf5e5
  • Name
    $light-green-100
    Default Value
    hsl(90, 45%, 89%)
    Compiled Value
    #e3f0d6
  • Name
    $light-green-200
    Default Value
    hsl(90, 45%, 81%)
    Compiled Value
    #cfe4b9
  • Name
    $light-green-300
    Default Value
    hsl(90, 45%, 72%)
    Compiled Value
    #b8d897
  • Name
    $light-green-400
    Default Value
    hsl(90, 45%, 63%)
    Compiled Value
    #a1cb76
  • Name
    $light-green-500
    Default Value
    hsl(90, 45%, 55%)
    Compiled Value
    #8cc059
  • Name
    $light-green-600
    Default Value
    hsl(90, 45%, 48%)
    Compiled Value
    #7ab143
  • Name
    $light-green-700
    Default Value
    hsl(90, 45%, 45%)
    Compiled Value
    #73a63f
  • Name
    $light-green-800
    Default Value
    hsl(90, 45%, 39%)
    Compiled Value
    #639037
  • Name
    $light-green-900
    Default Value
    hsl(90, 45%, 32%)
    Compiled Value
    #52762d
  • Name
    $light-green-a100
    Default Value
    hsl(90, 70%, 85%)
    Compiled Value
    #d9f4be
  • Name
    $light-green-a200
    Default Value
    hsl(90, 70%, 75%)
    Compiled Value
    #bfec93
  • Name
    $light-green-a400
    Default Value
    hsl(90, 70%, 59%)
    Compiled Value
    #96e04d
  • Name
    $light-green-a700
    Default Value
    hsl(90, 70%, 41%)
    Compiled Value
    #69b21f
  • Name
    $lime-50
    Default Value
    hsl(70, 60%, 92%)
    Compiled Value
    #f3f7de
  • Name
    $lime-100
    Default Value
    hsl(70, 60%, 88%)
    Compiled Value
    #edf3ce
  • Name
    $lime-200
    Default Value
    hsl(70, 60%, 81%)
    Compiled Value
    #e2ecb1
  • Name
    $lime-300
    Default Value
    hsl(70, 60%, 72%)
    Compiled Value
    #d4e28d
  • Name
    $lime-400
    Default Value
    hsl(70, 60%, 63%)
    Compiled Value
    #c6d968
  • Name
    $lime-500
    Default Value
    hsl(70, 60%, 55%)
    Compiled Value
    #bad147
  • Name
    $lime-600
    Default Value
    hsl(70, 60%, 48%)
    Compiled Value
    #abc431
  • Name
    $lime-700
    Default Value
    hsl(70, 60%, 45%)
    Compiled Value
    #a1b82e
  • Name
    $lime-800
    Default Value
    hsl(70, 60%, 39%)
    Compiled Value
    #8b9f28
  • Name
    $lime-900
    Default Value
    hsl(70, 60%, 32%)
    Compiled Value
    #728321
  • Name
    $lime-a100
    Default Value
    hsl(70, 80%, 83%)
    Compiled Value
    #ebf6b1
  • Name
    $lime-a200
    Default Value
    hsl(70, 80%, 71%)
    Compiled Value
    #dcf07a
  • Name
    $lime-a400
    Default Value
    hsl(70, 80%, 58%)
    Compiled Value
    #cdea3e
  • Name
    $lime-a700
    Default Value
    hsl(70, 80%, 40%)
    Compiled Value
    #9cb814
  • Name
    $yellow-50
    Default Value
    hsl(55, 85%, 93%)
    Compiled Value
    #fcfade
  • Name
    $yellow-100
    Default Value
    hsl(55, 85%, 89%)
    Compiled Value
    #fbf7cb
  • Name
    $yellow-200
    Default Value
    hsl(55, 85%, 81%)
    Compiled Value
    #f8f1a5
  • Name
    $yellow-300
    Default Value
    hsl(55, 85%, 74%)
    Compiled Value
    #f5ec84
  • Name
    $yellow-400
    Default Value
    hsl(55, 85%, 67%)
    Compiled Value
    #f2e663
  • Name
    $yellow-500
    Default Value
    hsl(55, 85%, 60%)
    Compiled Value
    #f0e142
  • Name
    $yellow-600
    Default Value
    hsl(51, 85%, 55%)
    Compiled Value
    #eed12b
  • Name
    $yellow-700
    Default Value
    hsl(47, 85%, 50%)
    Compiled Value
    #ecbd13
  • Name
    $yellow-800
    Default Value
    hsl(41, 85%, 50%)
    Compiled Value
    #eca713
  • Name
    $yellow-900
    Default Value
    hsl(35, 85%, 50%)
    Compiled Value
    #ec9213
  • Name
    $yellow-a100
    Default Value
    hsl(55, 95%, 83%)
    Compiled Value
    #fdf6aa
  • Name
    $yellow-a200
    Default Value
    hsl(55, 95%, 73%)
    Compiled Value
    #fcf179
  • Name
    $yellow-a400
    Default Value
    hsl(55, 95%, 58%)
    Compiled Value
    #fae92e
  • Name
    $yellow-a700
    Default Value
    hsl(50, 95%, 50%)
    Compiled Value
    #f9d006
  • Name
    $amber-50
    Default Value
    hsl(45, 85%, 93%)
    Compiled Value
    #fcf5de
  • Name
    $amber-100
    Default Value
    hsl(45, 85%, 89%)
    Compiled Value
    #fbefcb
  • Name
    $amber-200
    Default Value
    hsl(45, 85%, 81%)
    Compiled Value
    #f8e3a5
  • Name
    $amber-300
    Default Value
    hsl(45, 85%, 72%)
    Compiled Value
    #f4d67b
  • Name
    $amber-400
    Default Value
    hsl(45, 85%, 63%)
    Compiled Value
    #f1c950
  • Name
    $amber-500
    Default Value
    hsl(45, 85%, 55%)
    Compiled Value
    #eebd2b
  • Name
    $amber-600
    Default Value
    hsl(45, 85%, 50%)
    Compiled Value
    #ecb613
  • Name
    $amber-700
    Default Value
    hsl(40, 85%, 50%)
    Compiled Value
    #eca413
  • Name
    $amber-800
    Default Value
    hsl(34, 85%, 50%)
    Compiled Value
    #ec8e13
  • Name
    $amber-900
    Default Value
    hsl(27, 85%, 50%)
    Compiled Value
    #ec7513
  • Name
    $amber-a100
    Default Value
    hsl(45, 95%, 83%)
    Compiled Value
    #fde8aa
  • Name
    $amber-a200
    Default Value
    hsl(45, 95%, 73%)
    Compiled Value
    #fcdb79
  • Name
    $amber-a400
    Default Value
    hsl(45, 95%, 58%)
    Compiled Value
    #fac72e
  • Name
    $amber-a700
    Default Value
    hsl(42, 95%, 50%)
    Compiled Value
    #f9b006
  • Name
    $orange-50
    Default Value
    hsl(35, 85%, 93%)
    Compiled Value
    #fcf0de
  • Name
    $orange-100
    Default Value
    hsl(35, 85%, 89%)
    Compiled Value
    #fbe7cb
  • Name
    $orange-200
    Default Value
    hsl(35, 85%, 81%)
    Compiled Value
    #f8d5a5
  • Name
    $orange-300
    Default Value
    hsl(35, 85%, 72%)
    Compiled Value
    #f4c27b
  • Name
    $orange-400
    Default Value
    hsl(35, 85%, 63%)
    Compiled Value
    #f1ae50
  • Name
    $orange-500
    Default Value
    hsl(35, 85%, 55%)
    Compiled Value
    #ee9d2b
  • Name
    $orange-600
    Default Value
    hsl(35, 85%, 50%)
    Compiled Value
    #ec9213
  • Name
    $orange-700
    Default Value
    hsl(31, 85%, 50%)
    Compiled Value
    #ec8313
  • Name
    $orange-800
    Default Value
    hsl(27, 85%, 48%)
    Compiled Value
    #e27012
  • Name
    $orange-900
    Default Value
    hsl(23, 85%, 46%)
    Compiled Value
    #d95e12
  • Name
    $orange-a100
    Default Value
    hsl(35, 95%, 83%)
    Compiled Value
    #fddbaa
  • Name
    $orange-a200
    Default Value
    hsl(35, 95%, 73%)
    Compiled Value
    #fcc579
  • Name
    $orange-a400
    Default Value
    hsl(35, 95%, 58%)
    Compiled Value
    #faa52e
  • Name
    $orange-a700
    Default Value
    hsl(30, 95%, 50%)
    Compiled Value
    #f98006
  • Name
    $deep-orange-50
    Default Value
    hsl(15, 85%, 93%)
    Compiled Value
    #fce6de
  • Name
    $deep-orange-100
    Default Value
    hsl(15, 85%, 89%)
    Compiled Value
    #fbd7cb
  • Name
    $deep-orange-200
    Default Value
    hsl(15, 85%, 81%)
    Compiled Value
    #f8baa5
  • Name
    $deep-orange-300
    Default Value
    hsl(15, 85%, 74%)
    Compiled Value
    #f5a184
  • Name
    $deep-orange-400
    Default Value
    hsl(15, 85%, 67%)
    Compiled Value
    #f28763
  • Name
    $deep-orange-500
    Default Value
    hsl(15, 85%, 60%)
    Compiled Value
    #f06e42
  • Name
    $deep-orange-600
    Default Value
    hsl(15, 85%, 53%)
    Compiled Value
    #ed5421
  • Name
    $deep-orange-700
    Default Value
    hsl(15, 85%, 48%)
    Compiled Value
    #e24612
  • Name
    $deep-orange-800
    Default Value
    hsl(13, 85%, 43%)
    Compiled Value
    #cb3910
  • Name
    $deep-orange-900
    Default Value
    hsl(11, 85%, 39%)
    Compiled Value
    #b82e0f
  • Name
    $deep-orange-a100
    Default Value
    hsl(15, 95%, 85%)
    Compiled Value
    #fdc7b4
  • Name
    $deep-orange-a200
    Default Value
    hsl(15, 95%, 77%)
    Compiled Value
    #fca88d
  • Name
    $deep-orange-a400
    Default Value
    hsl(15, 95%, 63%)
    Compiled Value
    #fa7447
  • Name
    $deep-orange-a700
    Default Value
    hsl(15, 95%, 48%)
    Compiled Value
    #ef4006
  • Name
    $brown-50
    Default Value
    hsl(15, 20%, 93%)
    Compiled Value
    #f1ebea
  • Name
    $brown-100
    Default Value
    hsl(15, 20%, 87%)
    Compiled Value
    #e4dbd7
  • Name
    $brown-200
    Default Value
    hsl(15, 20%, 72%)
    Compiled Value
    #c6b0a9
  • Name
    $brown-300
    Default Value
    hsl(15, 20%, 61%)
    Compiled Value
    #af9288
  • Name
    $brown-400
    Default Value
    hsl(15, 20%, 50%)
    Compiled Value
    #997366
  • Name
    $brown-500
    Default Value
    hsl(15, 20%, 40%)
    Compiled Value
    #7a5c52
  • Name
    $brown-600
    Default Value
    hsl(15, 20%, 35%)
    Compiled Value
    #6b5047
  • Name
    $brown-700
    Default Value
    hsl(15, 20%, 30%)
    Compiled Value
    #5c453d
  • Name
    $brown-800
    Default Value
    hsl(15, 20%, 25%)
    Compiled Value
    #4d3933
  • Name
    $brown-900
    Default Value
    hsl(15, 20%, 20%)
    Compiled Value
    #3d2e29
  • Name
    $grey-50
    Default Value
    hsl(0, 0%, 98%)
    Compiled Value
    #fafafa
  • Name
    $grey-100
    Default Value
    hsl(0, 0%, 96%)
    Compiled Value
    whitesmoke
  • Name
    $grey-200
    Default Value
    hsl(0, 0%, 93%)
    Compiled Value
    #ededed
  • Name
    $grey-300
    Default Value
    hsl(0, 0%, 88%)
    Compiled Value
    #e0e0e0
  • Name
    $grey-400
    Default Value
    hsl(0, 0%, 74%)
    Compiled Value
    #bdbdbd
  • Name
    $grey-500
    Default Value
    hsl(0, 0%, 62%)
    Compiled Value
    #9e9e9e
  • Name
    $grey-600
    Default Value
    hsl(0, 0%, 46%)
    Compiled Value
    #757575
  • Name
    $grey-700
    Default Value
    hsl(0, 0%, 38%)
    Compiled Value
    #616161
  • Name
    $grey-800
    Default Value
    hsl(0, 0%, 26%)
    Compiled Value
    #424242
  • Name
    $grey-900
    Default Value
    hsl(0, 0%, 13%)
    Compiled Value
    #212121
  • Name
    $blue-grey-50
    Default Value
    hsl(200, 13%, 94%)
    Compiled Value
    #eef0f2
  • Name
    $blue-grey-100
    Default Value
    hsl(200, 13%, 84%)
    Compiled Value
    #d1d8dc
  • Name
    $blue-grey-200
    Default Value
    hsl(200, 13%, 73%)
    Compiled Value
    #b1bdc3
  • Name
    $blue-grey-300
    Default Value
    hsl(200, 13%, 62%)
    Compiled Value
    #92a2ab
  • Name
    $blue-grey-400
    Default Value
    hsl(200, 13%, 54%)
    Compiled Value
    #7a8f99
  • Name
    $blue-grey-500
    Default Value
    hsl(200, 13%, 46%)
    Compiled Value
    #667a85
  • Name
    $blue-grey-600
    Default Value
    hsl(200, 13%, 40%)
    Compiled Value
    #596a73
  • Name
    $blue-grey-700
    Default Value
    hsl(200, 13%, 33%)
    Compiled Value
    #49585f
  • Name
    $blue-grey-800
    Default Value
    hsl(200, 13%, 26%)
    Compiled Value
    #3a454b
  • Name
    $blue-grey-900
    Default Value
    hsl(200, 13%, 18%)
    Compiled Value
    #283034
  • Name
    $black
    Default Value
    hsl(0, 0%, 0%)
    Compiled Value
    black
  • Name
    $white
    Default Value
    hsl(0, 0%, 100%)
    Compiled Value
    white
  • Name
    $dark
    Default Value
    $black
    Compiled Value
    black
  • Name
    $dark-1
    Default Value
    rgba($black, 0.87)
    Compiled Value
    rgba(0, 0, 0, 0.87)
  • Name
    $dark-2
    Default Value
    rgba($black, 0.7)
    Compiled Value
    rgba(0, 0, 0, 0.7)
  • Name
    $dark-3
    Default Value
    rgba($black, 0.6)
    Compiled Value
    rgba(0, 0, 0, 0.6)
  • Name
    $dark-4
    Default Value
    rgba($black, 0.5)
    Compiled Value
    rgba(0, 0, 0, 0.5)
  • Name
    $dark-5
    Default Value
    rgba($black, 0.4)
    Compiled Value
    rgba(0, 0, 0, 0.4)
  • Name
    $dark-6
    Default Value
    rgba($black, 0.26)
    Compiled Value
    rgba(0, 0, 0, 0.26)
  • Name
    $dark-7
    Default Value
    rgba($black, 0.15)
    Compiled Value
    rgba(0, 0, 0, 0.15)
  • Name
    $dark-8
    Default Value
    rgba($black, 0.12)
    Compiled Value
    rgba(0, 0, 0, 0.12)
  • Name
    $dark-9
    Default Value
    rgba($black, 0.05)
    Compiled Value
    rgba(0, 0, 0, 0.05)
  • Name
    $light
    Default Value
    $white
    Compiled Value
    white
  • Name
    $light-1
    Default Value
    rgba($white, 0.87)
    Compiled Value
    rgba(255, 255, 255, 0.87)
  • Name
    $light-2
    Default Value
    rgba($white, 0.7)
    Compiled Value
    rgba(255, 255, 255, 0.7)
  • Name
    $light-3
    Default Value
    rgba($white, 0.6)
    Compiled Value
    rgba(255, 255, 255, 0.6)
  • Name
    $light-4
    Default Value
    rgba($white, 0.5)
    Compiled Value
    rgba(255, 255, 255, 0.5)
  • Name
    $light-5
    Default Value
    rgba($white, 0.4)
    Compiled Value
    rgba(255, 255, 255, 0.4)
  • Name
    $light-6
    Default Value
    rgba($white, 0.26)
    Compiled Value
    rgba(255, 255, 255, 0.26)
  • Name
    $light-7
    Default Value
    rgba($white, 0.15)
    Compiled Value
    rgba(255, 255, 255, 0.15)
  • Name
    $light-8
    Default Value
    rgba($white, 0.12)
    Compiled Value
    rgba(255, 255, 255, 0.12)
  • Name
    $light-9
    Default Value
    rgba($white, 0.05)
    Compiled Value
    rgba(255, 255, 255, 0.05)

Sources