UI Design
1. 間距 2. 格線 3. 靜態顏色 4. 動態顏色 5. 位置控制 6. 顯隱控制
20240521 ( Update 20240521_22:55)
【WebPage UI色彩取用值參考色～背景色vs前景色】灰色系列
|
F7
|
F0
|
E0
|
D0
|
C0
|
B0
|
A0
|
90
|
80
|
70
|
|
#f7f7f7
|
#f0f0f0
|
#e0e0e0
|
#d0d0d0
|
#c0c0c0
|
#b0b0b0
|
#a0a0a0
|
#909090
|
#808080
|
#707070
|
|
#f7f7f7
|
#f0f0f0
|
#e0e0e0
|
#d0d0d0
|
#c0c0c0
|
#b0b0b0
|
#a0a0a0
|
#909090
|
#808080
|
#707070
|
|
#f7f7f7
|
#f0f0f0
|
#e0e0e0
|
#d0d0d0
|
#c0c0c0
|
#b0b0b0
|
#a0a0a0
|
#909090
|
#808080
|
#707070
|
|
#f7f7f7
|
#f0f0f0
|
#e0e0e0
|
#d0d0d0
|
#c0c0c0
|
#b0b0b0
|
#a0a0a0
|
#909090
|
#808080
|
#707070
|
【WebPage UI色彩取用值參考色～背景色vs前景色】茶色系列
|
#000000
|
#907060
|
#a99070
|
#b9a090
|
#c9b9a9
|
#e0d0c0
|
#d0d0d0
|
#e0e0e0
|
#f0f0f0
|
|
by theme
|
#907060
|
#a99070
|
#b9a090
|
#c9b9a9
|
#e0d0c0
|
#d0d0d0
|
#e0e0e0
|
#f0f0f0
|
|
#ffffff
|
#907060
|
#a99070
|
#b9a090
|
#c9b9a9
|
#e0d0c0
|
#d0d0d0
|
#e0e0e0
|
#f0f0f0
|
|
bg #000000
|
#907060
|
#a99070
|
#b9a090
|
#c9b9a9
|
#e0d0c0
|
#d0d0d0
|
#e0e0e0
|
#f0f0f0
|
|
bg #707070
|
#907060
|
#a99070
|
#b9a090
|
#c9b9a9
|
#e0d0c0
|
#d0d0d0
|
#e0e0e0
|
#f0f0f0
|
|
bg #b0b0b0
|
#907060
|
#a99070
|
#b9a090
|
#c9b9a9
|
#e0d0c0
|
#d0d0d0
|
#e0e0e0
|
#f0f0f0
|
|
bg #d9d9d9
|
#907060
|
#a99070
|
#b9a090
|
#c9b9a9
|
#e0d0c0
|
#d0d0d0
|
#e0e0e0
|
#f0f0f0
|
|
bg #ffffff
|
#907060
|
#a99070
|
#b9a090
|
#c9b9a9
|
#e0d0c0
|
#d0d0d0
|
#e0e0e0
|
#f0f0f0
|
【WebPage UI色彩取用值參考色～背景色vs前景色】橙黃色系列
|
#000000
|
#f06030
|
#ff9030
|
#ffcc00
|
#fff050
|
#fffaaa
|
#d0d0d0
|
#e0e0e0
|
#f0f0f0
|
|
by theme
|
#f06030
|
#ff9030
|
#ffcc00
|
#fff050
|
#fffaaa
|
#d0d0d0
|
#e0e0e0
|
#f0f0f0
|
|
#ffffff
|
#f06030
|
#ff9030
|
#ffcc00
|
#fff050
|
#fffaaa
|
#d0d0d0
|
#e0e0e0
|
#f0f0f0
|
|
bg #000000
|
#f06030
|
#ff9030
|
#ffcc00
|
#fff050
|
#fffaaa
|
#d0d0d0
|
#e0e0e0
|
#f0f0f0
|
|
bg #707070
|
#f06030
|
#ff9030
|
#ffcc00
|
#fff050
|
#fffaaa
|
#d0d0d0
|
#e0e0e0
|
#f0f0f0
|
|
bg #b0b0b0
|
#f06030
|
#ff9030
|
#ffcc00
|
#fff050
|
#fffaaa
|
#d0d0d0
|
#e0e0e0
|
#f0f0f0
|
|
bg #d9d9d9
|
#f06030
|
#ff9030
|
#ffcc00
|
#fff050
|
#fffaaa
|
#d0d0d0
|
#e0e0e0
|
#f0f0f0
|
|
bg #ffffff
|
#f06030
|
#ff9030
|
#ffcc00
|
#fff050
|
#fffaaa
|
#d0d0d0
|
#e0e0e0
|
#f0f0f0
|
【WebPage UI色彩取用值參考色～背景色vs前景色】棕色系列
|
#000000
|
#805030
|
#b07020
|
#cc9933
|
#ddbb66
|
#eedd99
|
#d0d0d0
|
#e0e0e0
|
#f0f0f0
|
|
by theme
|
#805030
|
#b07020
|
#cc9933
|
#ddbb66
|
#eedd99
|
#d0d0d0
|
#e0e0e0
|
#f0f0f0
|
|
#ffffff
|
#805030
|
#b07020
|
#cc9933
|
#ddbb66
|
#eedd99
|
#d0d0d0
|
#e0e0e0
|
#f0f0f0
|
|
bg #000000
|
#805030
|
#b07020
|
#cc9933
|
#ddbb66
|
#eedd99
|
#d0d0d0
|
#e0e0e0
|
#f0f0f0
|
|
bg #707070
|
#805030
|
#b07020
|
#cc9933
|
#ddbb66
|
#eedd99
|
#d0d0d0
|
#e0e0e0
|
#f0f0f0
|
|
bg #b0b0b0
|
#805030
|
#b07020
|
#cc9933
|
#ddbb66
|
#eedd99
|
#d0d0d0
|
#e0e0e0
|
#f0f0f0
|
|
bg #d9d9d9
|
#805030
|
#b07020
|
#cc9933
|
#ddbb66
|
#eedd99
|
#d0d0d0
|
#e0e0e0
|
#f0f0f0
|
|
bg #ffffff
|
#805030
|
#b07020
|
#cc9933
|
#ddbb66
|
#eedd99
|
#d0d0d0
|
#e0e0e0
|
#f0f0f0
|
【WebPage UI色彩取用值參考色～背景色vs前景色】粉紅色系列
|
#000000
|
#e080b0
|
#f0a0c0
|
#f9b9c9
|
#f9d0e0
|
#f9e0e0
|
#d0d0d0
|
#e0e0e0
|
#f0f0f0
|
|
#000000
|
#f080c0
|
#f999c9
|
#f9b9c9
|
#f9d0e0
|
#f9e0e0
|
#d0d0d0
|
#e0e0e0
|
#f0f0f0
|
|
by theme
|
#f080c0
|
#f999c9
|
#f9b9c9
|
#f9d0e0
|
#f9e0e0
|
#d0d0d0
|
#e0e0e0
|
#f0f0f0
|
|
#ffffff
|
#f080c0
|
#f999c9
|
#f9b9c9
|
#f9d0e0
|
#f9e0e0
|
#d0d0d0
|
#e0e0e0
|
#f0f0f0
|
|
bg #000000
|
#f080c0
|
#f999c9
|
#f9b9c9
|
#f9d0e0
|
#f9e0e0
|
#d0d0d0
|
#e0e0e0
|
#f0f0f0
|
|
bg #707070
|
#f080c0
|
#f999c9
|
#f9b9c9
|
#f9d0e0
|
#f9e0e0
|
#d0d0d0
|
#e0e0e0
|
#f0f0f0
|
|
bg #b0b0b0
|
#f080c0
|
#f999c9
|
#f9b9c9
|
#f9d0e0
|
#f9e0e0
|
#d0d0d0
|
#e0e0e0
|
#f0f0f0
|
|
bg #d9d9d9
|
#f080c0
|
#f999c9
|
#f9b9c9
|
#f9d0e0
|
#f9e0e0
|
#d0d0d0
|
#e0e0e0
|
#f0f0f0
|
|
bg #ffffff
|
#f080c0
|
#f999c9
|
#f9b9c9
|
#f9d0e0
|
#f9e0e0
|
#d0d0d0
|
#e0e0e0
|
#f0f0f0
|
【WebPage UI色彩取用值參考色～背景色vs前景色】
| v.0
|
#f4c6cf
|
#f9e0e7
|
#f7f7f8
|
#f4c6cf
|
#f9e0e7
|
| v.1
|
#f6c6d6
|
#f9e0e6
|
#f7f7f7
|
#f6c6d6
|
#f9e0e6
|
|
#f6c6d6
|
#f9e0e6
|
#f7f7f7
|
#f6c6d6
|
#f9e0e6
|
| v.1n
|
#f9d0e0
|
#f9e0e0
|
#f0f0f0
|
#f9d0e0
|
#f9e0e0
|
|
#f9d0e0
|
#f9e0e0
|
#f0f0f0
|
#f9d0e0
|
#f9e0e0
|
| v.2n
|
#f0b9d0
|
#f9d0e0
|
#e0e0e0
|
#f0b0d0
|
#f9d9e0
|
|
#f0b9d0
|
#f9d0e0
|
#e0e0e0
|
#f0b9d0
|
#f9d0e0
|
【WebPage UI色彩取用值參考色～背景色vs前景色】
|
#f0b9d0
|
#f9d0e0
|
#f9e0e0
|
#d0d0d0
|
#e0e0e0
|
#f0f0f0
|
|
#f0b9d0
|
#f9d0e0
|
#f9e0e0
|
#d0d0d0
|
#e0e0e0
|
#f0f0f0
|
|
#f0b9d0
|
#f9d0e0
|
#f9e0e0
|
#d0d0d0
|
#e0e0e0
|
#f0f0f0
|
|
#f0b9d0
|
#f9d0e0
|
#f9e0e0
|
#d0d0d0
|
#e0e0e0
|
#f0f0f0
|
|
#f0b9d0
|
#f9d0e0
|
#f9e0e0
|
#d0d0d0
|
#e0e0e0
|
#f0f0f0
|
|
F7
|
F0
|
E0
|
D0
|
C0
|
B0
|
A0
|
90
|
80
|
70
|
|
#f7f7f7
|
#f0f0f0
|
#e0e0e0
|
#d0d0d0
|
#c0c0c0
|
#b0b0b0
|
#a0a0a0
|
#909090
|
#808080
|
#707070
|
|
#f7f7f7
|
#f0f0f0
|
#e0e0e0
|
#d0d0d0
|
#c0c0c0
|
#b0b0b0
|
#a0a0a0
|
#909090
|
#808080
|
#707070
|
|
#f7f7f7
|
#f0f0f0
|
#e0e0e0
|
#d0d0d0
|
#c0c0c0
|
#b0b0b0
|
#a0a0a0
|
#909090
|
#808080
|
#707070
|
|
#f7f7f7
|
#f0f0f0
|
#e0e0e0
|
#d0d0d0
|
#c0c0c0
|
#b0b0b0
|
#a0a0a0
|
#909090
|
#808080
|
#707070
|
【Web色彩取用值】
|
#995577
|
#dd99bb
|
#ffaacc
|
|
#dd99bb
|
#ffcccc
|
#ffaacc
|
|
#f0f0f0
|
#d0d0d0
|
#a0a0a0
|
|
#ffdd66
|
#ffdd00
|
#cc88ee
|
|
#ddbb66
|
#cc88ee
|
#f08080
|
(注意：每台設備螢幕呈現效果會不同)
Views: 2
繁體中文 
English
你必須登入才能發表留言。