🌟 Rico: 데이터 기반 디자인 애플리케이션 구축을 위한 모바일 스크린샷 데이터셋
해당 문서는
- design search(디자인 검색)
- UI layout generation(UI 레이아웃 생성)
- UI code generation(UI 코드 생성)
- user interaction modeling(사용자 인터랙션 모델링)
- user perception prediction(사용자 인식 예측)
과 같은 5가지 데이터 기반 애플리케이션 클래스를 지원하기 위해 만들어진 모바일 스크린샷 데이터셋인 Rico Dataset을 소개한다.
❗️ Rico Dataset에는 27개의 카테고리에 속하는 9300 개 이상의 안드로이드 스크린샷을 제공한다.
- 구분할 수 있는
UI 컴포넌트의 카테고리가 27개인 것이 아니라, 스크린샷의 기존 앱 서비스가 속하는 카테고리가 27개인 것이다.
( Art&Design, Comics, Education, Shopping, Weather ...)
The Dataset
- 27개의 카테고리에 속하는 약 9300개의 안드로이드 앱 스크린샷을 담고 있다
- 이 앱들의 평점은 4.1점이다.
- 66,000개가 넘는 UI 화면을 제공한다.
Data Collection
- Rico Dataset은 단순히 앱 화면을 캡쳐하여 만든 데이터셋이 아니다.
인간 인력 + 자동화 시스템- 사용자가 구글 플레이 스토어에서 앱을 다운받아 사용하면, 시스템이 사용 과정을 기록한다. (어떤 부분을 터치하면 어디로 넘어가는지 등의 사용자 인터랙션까지 기록함)
- 크라우드소싱과 자동화를 결합함으로써 Rico는 크롤링 전략만 사용하는 것보다 앱의 UI 상태를 더 잘 파악할 수 있다.
Design Representation
- Rico는 Google Play 스토어 메타데이터, 사용자 상호작용 추적 세트 및 발견된 모든 UI 목록을 담고 있다.
- 구글 플레이 스토어 메타데이터: 앱 카테고리, 평균 평점, 평점 수, 다운로드 수
- 사용자 상호작용 추적: 일련의 UI와 이를 연결하는 사용자 상호작용으로 구성
- 각 UI는
스크린샷, Android뷰 계층 구조, 탐색된사용자 인터렉션세트, 사용자 인터렉션에 대한 응답으로전환 효과를 캡처하는 애니메이션세트,UI 레이아웃의 학습된 벡터 표현으로 구성된다.- 뷰 계층 구조: UI를 구성하는 모든 요소, 해당 속성 및 이들 간의 관계를 캡처한 것
- 각 element에 대하여
- 화면 위치
- 차원 및 가시성과 같은 시각적 속성
- 클래스 이름
- ID
- 표시된 텍스트와 같은 텍스트 속성
- 계층 구조의 하위 목록과 같은 구조적 속성
Deep Learning Applications
- Rico Dataset은 딥러닝 모델을 훈련시키기에 충분히 크다.
- Rico는 UI 레이아웃에 대한 임베딩을 학습하도록 오토인코더를 훈련시켰고, 이를 사용하여 시각적 레이아웃을 인코딩하는
64차원 벡터 표현으로 각 UI에 주석을 달았다.- 이
벡터 표현은 (데이터셋에 대한 예제 기반 검색을 지원하는) 유사한 UI를 구조적으로(종종 semantically하게) 계산하는 데 사용할 수 있다.
- 이
- 레이아웃 정보를 포함하는 training input을 생성하기 위해, 뷰 계층 구조에서 모든 leaf 요소들의 bounding box regions을 캡처하여 텍스트와 비텍스트 요소를 구분하는 각 UI에 대한 새 이미지를 구성했습니다.
- Rico의 뷰 계층 구조는 이러한 inputs을 생성하기 위해 noise가 많은 이미지 처리 또는 OCR 기술이 필요하지 않습니다.
( = input data를 만들 때에 noisy한 이미지나 OCR 기술이 필요 없다. )
1. UI SCREENSHOTS AND VIEW HIERARCHIES
- 66,000개 이상의 UI 화면을 포함한다.
- 각 UI에 대해 스크린샷(PNG 파일)과 세부 뷰 계층 구조(JSON 파일)를 제공한다.
- 뷰 계층 구조 파일 예시는 아래와 같다.
{
"activity_name": "com.funforfones.android.chicagocta/com.funforfones.android.chicagocta.MainActivity",
"activity": {
"root": {
"scrollable-horizontal": false,
"draw": true,
"ancestors": [
"android.widget.FrameLayout",
"android.view.ViewGroup",
"android.view.View",
"java.lang.Object"
],
"clickable": false,
"pressed": "not_pressed",
"focusable": false,
"long-clickable": false,
"enabled": true,
"bounds": [
36,
84,
1404,
2392
],
"visibility": "visible",
"content-desc": [
null
],
"rel-bounds": [
0,
0,
1368,
2308
],
"focused": false,
"selected": false,
"scrollable-vertical": false,
"children": [
....
],
"adapter-view": false,
"abs-pos": true,
"pointer": "2e18ce7",
"class": "com.android.internal.policy.PhoneWindow$DecorView",
"visible-to-user": true
},
"added_fragments": [],
"active_fragments": []
},
"is_keyboard_deployed": true,
"request_id": "1350"
}activity_name에는 앱 패키지의 이름과 UI가 속한 activity의 이름이 포함된다.- UI의 모든 element는 루트 노드(
["activity"]["root"])에서 시작하는 뷰 계층 구조를 순회하여 액세스할 수 있다. class속성: 클래스 이름 지정ancestors속성: 슈퍼클래스 목록이 포함됨bounds속성: 1440x2560 화면 창 내에서 요소의bounding box를 지정한다.
2. Metadata
- 각 UI 화면에 대한 메타데이터를 포함한다.
- 해당 화면이 나온 앱의 이름, 해당 앱 내의 사용자 상호 작용 추적, 해당 추적 내의 UI 번호
- CSV 파일의 예시는 아래와 같다.
UI Number,App Package Name,Interaction Trace Number,UI Number in Trace
0,com.brc.PeriodTrackerDiary,0,15
1,com.brc.PeriodTrackerDiary,0,531
2,yong.app.videoeditor,0,221
.
.
.
3. UI Layout Vectors
- 텍스트 및 이미지 분포를 기반으로 레이아웃을 인코딩하는 각 UI 화면에 대한 64차원 벡터 표현을 포함한다.
- 특정 UI에 대한 레이아웃 벡터에 액세스하는 방법
ui_names.json에 포함된 배열에서 해당 인덱스를 찾는다.ui_vectors.npy에서 2차원 배열을 로드하고, 첫 번째 차원을 따라 해당 인덱스에서 슬라이스를 가져온다.
- Example) UI 20353.png는 인덱스 2에 있다
→ 해당 레이아웃 벡터는 Python에서ui_vectors[2,:]로 얻을 수 있다. - 이 표현은 다른 앱에서 유사한 UI를 클러스터링하고 검색하는 데 사용할 수 있다.
- 아래는 학습된 레이아웃으로부터 가장 비슷한 다른 레이아웃을 보여주는 몇 가지 결과이다.
4. Interaction Traces
- 앱별로 정리된 사용자 상호작용 추적을 포함한다.
- 각 앱에는 trace_0, trace_1 등 여러 개의 추적이 있을 수 있다.
- 각 추적은 스크린샷 및 뷰 계층으로 캡처된 일련의 UI(아래 참조)로 구성된다.
- 각 추적에는 각 UI 화면에서 수행되는 사용자 상호 작용의 XY 좌표를 캡처하는 해당
gestures.json파일도 있다(아래 예 참조).
{
"48": [[0.2671957671957672, 0.7721088435374149]],
"73": [[0.5302343159486017, 0.36904761904761907],
[0.5302343159486017, 0.36904761904761908],
[0.5302343159486017, 0.36904761904761909],
[0.5302343159486017, 0.36904761904761910],
[0.5302343159486017, 0.36904761904761911]],
"550": [[0.36999244142101284, 0.7721088435374149]],
"764": [[0.5483749055177627, 0.3758503401360544]],
"828": [[0.46674225245653816, 0.7704081632653061]],
.
.
.
}5. Animations
- 사용자 상호 작용에 대한 응답으로 화면이 애니메이션되는 방식을 보여주는 GIF를 포함한다.
6. Play Store Metadata
- 앱의 카테고리, 평점, 등급 수 및 다운로드 수를 포함하여 데이터셋의 앱에 대한 메타데이터를 포함한다.
7. UI Screenshots and Hierarchies with Semantic Annotations
- 66,000개 이상의 UI 화면
- screenshot 속의 element가 무엇을 의미하는지, 어떻게 사용되었는지 설명하는 시맨틱 annotation으로 설명하는 계층 구조
를 포함한다.
- 이러한 스크린샷과 계층 구조는
24개의 UI Component카테고리,197개의 텍스트 버튼 Concept및97개의 아이콘 클래스를 담고 있다. - 시맨틱 스크린샷은 각 구성 요소, 버튼 및 아이콘 클래스를 고유한 색상으로 인코딩한다.
- 시맨틱 Concept과 해당 색상 간의 매핑은 다음과 같은 세 개의 개별 파일에 제공된다.
- component categories (
component_legend.json)
{ "Web View": { "rgb": [ 66, 166, 246 ], "hex": "#42A5F5" }, "List Item": { "rgb": [ 256, 225, 179 ], "hex": "#FFE0B2" }, . . . }- text button concepts (
textButton_legend.json)
{ "restore": { "rgb": [ 205, 219, 104 ], "hex": "#ccda68" }, "all": { "rgb": [ 205, 219, 191 ], "hex": "#ccdabe" }, . . . }- icon classes (
icon_legend.json)
{ "shop": { "rgb": [ 20, 20, 20 ], "hex": "#141414" }, "expand_less": { "rgb": [ 22, 22, 22 ], "hex": "#161616" }, . . . } - component categories (
- UI 스크린샷과 해당 시맨틱 annotation의 몇 가지 예시는 아래와 같다.
- 각 스크린샷에 대해 원래 뷰 계층 구조의 semantic 부분을 나타내는 해당 UI 계층 구조도 제공합니다.
- 이 계층 구조의 각 요소에는
24개의 UI Component카테고리 중 하나에 해당하는componentLabel필드가 있습니다. - 특정한 유형의 텍스트 버튼 또는 아이콘으로 분류되는 요소에는 각각 textButtonClass 또는 iconClass 필드도 포함된다.
{
.
.
.
{
"iconClass": "cart",
"resource-id": "com.mobile.android.patriots:id/action_shop",
"ancestors": [
"android.support.v7.widget.AppCompatTextView",
"android.widget.TextView",
"android.view.View",
"java.lang.Object"
],
"clickable": true,
"class": "android.support.v7.view.menu.ActionMenuItemView",
"bounds": [
1272,
98,
1440,
266
],
"componentLabel": "Icon"
}
.
.
.
{
"ancestors": [
"android.widget.LinearLayout",
"android.view.ViewGroup",
"android.view.View",
"java.lang.Object"
],
"class": "android.support.design.widget.TabLayout$TabView",
"bounds": [
90,
280,
342,
448
],
"clickable": true,
"componentLabel": "Text Button",
"textButtonClass": "all"
},
.
.
.
}- 하지만, Rico Dataset 공식 사이트에선 위 세 파일을 찾을 수 없었다. (직접 다운 받았으나 와이어프레임과 스크린샷, 시멘틱 annotation을 나타내는 json 파일만 있었다.)
- https://github.com/luileito/enrico 에서 위 세 파일을 찾았다!
1. component_legend.json
{
"Web View": {
"rgb": [
66,
166,
246
],
"hex": "#42A5F5"
},
"List Item": {
"rgb": [
256,
225,
179
],
"hex": "#FFE0B2"
},
"Multi-Tab": {
"rgb": [
256,
242,
118
],
"hex": "#FFF176"
},
"Input": {
"rgb": [
145,
203,
250
],
"hex": "#90CAF9"
},
"Text Button": {
"rgb": [
206,
221,
57
],
"hex": "#CDDC39"
},
"Slider": {
"rgb": [
206,
220,
221
],
"hex": "#CDDBDC"
},
"Background Image": {
"rgb": [
211,
20,
83
],
"hex": "#D21453"
},
"Advertisement": {
"rgb": [
13,
71,
162
],
"hex": "#0D47A1"
},
"Card": {
"rgb": [
216,
190,
227
],
"hex": "#D7BDE2"
},
"Bottom Navigation": {
"rgb": [
187,
104,
201
],
"hex": "#BA68C8"
},
"Modal": {
"rgb": [
0,
256,
205
],
"hex": "#00FFCC"
},
"On/Off Switch": {
"rgb": [
79,
196,
248
],
"hex": "#4FC3F7"
},
"Button Bar": {
"rgb": [
256,
206,
211
],
"hex": "#FFCDD2"
},
"Number Stepper": {
"rgb": [
175,
214,
130
],
"hex": "#AED581"
},
"Text": {
"rgb": [
74,
20,
141
],
"hex": "#4A148C"
},
"Map View": {
"rgb": [
226,
191,
232
],
"hex": "#E1BEE7"
},
"Checkbox": {
"rgb": [
256,
139,
101
],
"hex": "#FF8A65"
},
"Date Picker": {
"rgb": [
205,
102,
154
],
"hex": "#CC6699"
},
"Image": {
"rgb": [
241,
98,
147
],
"hex": "#F06292"
},
"Drawer": {
"rgb": [
103,
58,
184
],
"hex": "#673AB7"
},
"Radio Button": {
"rgb": [
256,
184,
77
],
"hex": "#FFB74D"
},
"Video": {
"rgb": [
0,
205,
0
],
"hex": "#00CC00"
},
"Toolbar": {
"rgb": [
77,
209,
226
],
"hex": "#4DD0E1"
},
"Pager Indicator": {
"rgb": [
249,
188,
209
],
"hex": "#F8BBD0"
}
}2. textButton_legend.json
{
"restore": {
"rgb": [
205,
219,
104
],
"hex": "#ccda68"
},
"all": {
"rgb": [
205,
219,
191
],
"hex": "#ccdabe"
},
"feedback": {
"rgb": [
205,
219,
99
],
"hex": "#ccda63"
},
"show": {
"rgb": [
205,
219,
173
],
"hex": "#ccdaac"
},
"skip": {
"rgb": [
205,
219,
185
],
"hex": "#ccdab8"
},
"random": {
"rgb": [
205,
219,
34
],
"hex": "#ccda22"
},
"results": {
"rgb": [
205,
219,
63
],
"hex": "#ccda3f"
},
"radar": {
"rgb": [
205,
219,
124
],
"hex": "#ccda7c"
},
"go": {
"rgb": [
205,
219,
193
],
"hex": "#ccdac0"
},
"polish": {
"rgb": [
205,
219,
14
],
"hex": "#ccda0e"
},
"round trip": {
"rgb": [
205,
219,
30
],
"hex": "#ccda1e"
},
"find": {
"rgb": [
205,
219,
160
],
"hex": "#ccda9f"
},
"help": {
"rgb": [
205,
219,
126
],
"hex": "#ccda7e"
},
"pause": {
"rgb": [
205,
219,
52
],
"hex": "#ccda34"
},
"calculate": {
"rgb": [
205,
219,
53
],
"hex": "#ccda35"
},
"vibration": {
"rgb": [
205,
219,
57
],
"hex": "#ccda39"
},
"menu": {
"rgb": [
205,
219,
69
],
"hex": "#ccda45"
},
"appetizers": {
"rgb": [
205,
219,
75
],
"hex": "#ccda4b"
},
"add": {
"rgb": [
205,
219,
189
],
"hex": "#ccdabc"
},
"book": {
"rgb": [
205,
219,
179
],
"hex": "#ccdab2"
},
"activate": {
"rgb": [
205,
219,
78
],
"hex": "#ccda4e"
},
"advanced": {
"rgb": [
205,
219,
43
],
"hex": "#ccda2b"
},
"save": {
"rgb": [
205,
219,
177
],
"hex": "#ccdab0"
},
"info": {
"rgb": [
205,
219,
156
],
"hex": "#ccda9b"
},
"premium": {
"rgb": [
205,
219,
110
],
"hex": "#ccda6e"
},
"auto": {
"rgb": [
205,
219,
122
],
"hex": "#ccda7a"
},
"faq": {
"rgb": [
205,
219,
51
],
"hex": "#ccda33"
},
"shop now": {
"rgb": [
205,
219,
46
],
"hex": "#ccda2e"
},
"redeem": {
"rgb": [
205,
219,
42
],
"hex": "#ccda2a"
},
"facebook": {
"rgb": [
205,
219,
182
],
"hex": "#ccdab5"
},
"day": {
"rgb": [
205,
219,
145
],
"hex": "#ccda90"
},
"categories": {
"rgb": [
205,
219,
71
],
"hex": "#ccda47"
},
"instructions": {
"rgb": [
205,
219,
17
],
"hex": "#ccda11"
},
"trk": {
"rgb": [
205,
219,
0
],
"hex": "#ccda00"
},
"rotate": {
"rgb": [
205,
219,
23
],
"hex": "#ccda17"
},
"name": {
"rgb": [
205,
219,
85
],
"hex": "#ccda55"
},
"remember me": {
"rgb": [
205,
219,
16
],
"hex": "#ccda10"
},
"settings": {
"rgb": [
205,
219,
166
],
"hex": "#ccdaa5"
},
"edit": {
"rgb": [
205,
219,
169
],
"hex": "#ccdaa8"
},
"always": {
"rgb": [
205,
219,
123
],
"hex": "#ccda7b"
},
"button": {
"rgb": [
205,
219,
88
],
"hex": "#ccda58"
},
"manual": {
"rgb": [
205,
219,
64
],
"hex": "#ccda40"
},
"upload": {
"rgb": [
205,
219,
45
],
"hex": "#ccda2d"
},
"refresh": {
"rgb": [
205,
219,
143
],
"hex": "#ccda8e"
},
"privacy policy": {
"rgb": [
205,
219,
90
],
"hex": "#ccda5a"
},
"continue": {
"rgb": [
205,
219,
180
],
"hex": "#ccdab3"
},
"exercises": {
"rgb": [
205,
219,
20
],
"hex": "#ccda14"
},
"history": {
"rgb": [
205,
219,
131
],
"hex": "#ccda82"
},
"popular": {
"rgb": [
205,
219,
58
],
"hex": "#ccda3a"
},
"view": {
"rgb": [
205,
219,
181
],
"hex": "#ccdab4"
},
"google": {
"rgb": [
205,
219,
141
],
"hex": "#ccda8c"
},
"deutsch": {
"rgb": [
205,
219,
31
],
"hex": "#ccda1f"
},
"list": {
"rgb": [
205,
219,
178
],
"hex": "#ccdab1"
},
"twitter": {
"rgb": [
205,
219,
98
],
"hex": "#ccda62"
},
"cancelar": {
"rgb": [
205,
219,
2
],
"hex": "#ccda02"
},
"terrain": {
"rgb": [
205,
219,
36
],
"hex": "#ccda24"
},
"back": {
"rgb": [
205,
219,
194
],
"hex": "#ccdac1"
},
"weather alerts": {
"rgb": [
205,
219,
112
],
"hex": "#ccda70"
},
"past": {
"rgb": [
205,
219,
119
],
"hex": "#ccda77"
},
"unlock": {
"rgb": [
205,
219,
95
],
"hex": "#ccda5f"
},
"replay": {
"rgb": [
205,
219,
37
],
"hex": "#ccda25"
},
"video": {
"rgb": [
205,
219,
147
],
"hex": "#ccda92"
},
"connect": {
"rgb": [
205,
219,
129
],
"hex": "#ccda80"
},
"follow": {
"rgb": [
205,
219,
159
],
"hex": "#ccda9e"
},
"download": {
"rgb": [
205,
219,
164
],
"hex": "#ccdaa3"
},
"lock screen weather banner": {
"rgb": [
205,
219,
66
],
"hex": "#ccda42"
},
"girl": {
"rgb": [
205,
219,
10
],
"hex": "#ccda0a"
},
"hourly": {
"rgb": [
205,
219,
116
],
"hex": "#ccda74"
},
"retry": {
"rgb": [
205,
219,
186
],
"hex": "#ccdab9"
},
"hide": {
"rgb": [
205,
219,
81
],
"hex": "#ccda51"
},
"contacts": {
"rgb": [
205,
219,
70
],
"hex": "#ccda46"
},
"forecast": {
"rgb": [
205,
219,
68
],
"hex": "#ccda44"
},
"lights": {
"rgb": [
205,
219,
97
],
"hex": "#ccda61"
},
"dutch": {
"rgb": [
205,
219,
7
],
"hex": "#ccda07"
},
"donate": {
"rgb": [
205,
219,
47
],
"hex": "#ccda2f"
},
"email": {
"rgb": [
205,
219,
152
],
"hex": "#ccda97"
},
"latin": {
"rgb": [
205,
219,
12
],
"hex": "#ccda0c"
},
"business": {
"rgb": [
205,
219,
62
],
"hex": "#ccda3e"
},
"schedule": {
"rgb": [
205,
219,
59
],
"hex": "#ccda3b"
},
"free": {
"rgb": [
205,
219,
151
],
"hex": "#ccda96"
},
"logout": {
"rgb": [
205,
219,
74
],
"hex": "#ccda4a"
},
"undo": {
"rgb": [
205,
219,
48
],
"hex": "#ccda30"
},
"directions": {
"rgb": [
205,
219,
41
],
"hex": "#ccda29"
},
"news": {
"rgb": [
205,
219,
114
],
"hex": "#ccda72"
},
"post": {
"rgb": [
205,
219,
154
],
"hex": "#ccda99"
},
"paste": {
"rgb": [
205,
219,
26
],
"hex": "#ccda1a"
},
"i have an account": {
"rgb": [
205,
219,
133
],
"hex": "#ccda84"
},
"boy": {
"rgb": [
205,
219,
9
],
"hex": "#ccda09"
},
"about": {
"rgb": [
205,
219,
121
],
"hex": "#ccda79"
},
"ok": {
"rgb": [
205,
219,
192
],
"hex": "#ccdabf"
},
"filipino": {
"rgb": [
205,
219,
3
],
"hex": "#ccda03"
},
"route": {
"rgb": [
205,
219,
65
],
"hex": "#ccda41"
},
"give permission": {
"rgb": [
205,
219,
28
],
"hex": "#ccda1c"
},
"filter": {
"rgb": [
205,
219,
136
],
"hex": "#ccda87"
},
"not now": {
"rgb": [
205,
219,
93
],
"hex": "#ccda5d"
},
"login": {
"rgb": [
205,
219,
195
],
"hex": "#ccdac2"
},
"got it": {
"rgb": [
205,
219,
192
],
"hex": "#ccdabf"
},
"options": {
"rgb": [
205,
219,
94
],
"hex": "#ccda5e"
},
"block": {
"rgb": [
205,
219,
79
],
"hex": "#ccda4f"
},
"nearby": {
"rgb": [
205,
219,
55
],
"hex": "#ccda37"
},
"comment": {
"rgb": [
205,
219,
135
],
"hex": "#ccda86"
},
"color": {
"rgb": [
205,
219,
61
],
"hex": "#ccda3d"
},
"italiano": {
"rgb": [
205,
219,
21
],
"hex": "#ccda15"
},
"united states": {
"rgb": [
205,
219,
19
],
"hex": "#ccda13"
},
"subscribe": {
"rgb": [
205,
219,
84
],
"hex": "#ccda54"
},
"set": {
"rgb": [
205,
219,
184
],
"hex": "#ccdab7"
},
"san francisco ca": {
"rgb": [
205,
219,
1
],
"hex": "#ccda01"
},
"female": {
"rgb": [
205,
219,
103
],
"hex": "#ccda67"
},
"spanish": {
"rgb": [
205,
219,
35
],
"hex": "#ccda23"
},
"apply": {
"rgb": [
205,
219,
125
],
"hex": "#ccda7d"
},
"message": {
"rgb": [
205,
219,
148
],
"hex": "#ccda93"
},
"open": {
"rgb": [
205,
219,
107
],
"hex": "#ccda6b"
},
"select": {
"rgb": [
205,
219,
162
],
"hex": "#ccdaa1"
},
"browse": {
"rgb": [
205,
219,
96
],
"hex": "#ccda60"
},
"unknown": {
"rgb": [
205,
219,
27
],
"hex": "#ccda1b"
},
"support": {
"rgb": [
205,
219,
72
],
"hex": "#ccda48"
},
"next": {
"rgb": [
205,
219,
190
],
"hex": "#ccdabd"
},
"filmstrip": {
"rgb": [
205,
219,
102
],
"hex": "#ccda66"
},
"live": {
"rgb": [
205,
219,
111
],
"hex": "#ccda6f"
},
"camera": {
"rgb": [
205,
219,
49
],
"hex": "#ccda31"
},
"music": {
"rgb": [
205,
219,
86
],
"hex": "#ccda56"
},
"change": {
"rgb": [
205,
219,
163
],
"hex": "#ccdaa2"
},
"call": {
"rgb": [
205,
219,
138
],
"hex": "#ccda89"
},
"preview": {
"rgb": [
205,
219,
40
],
"hex": "#ccda28"
},
"checkout": {
"rgb": [
205,
219,
67
],
"hex": "#ccda43"
},
"today": {
"rgb": [
205,
219,
56
],
"hex": "#ccda38"
},
"more": {
"rgb": [
205,
219,
187
],
"hex": "#ccdaba"
},
"website": {
"rgb": [
205,
219,
38
],
"hex": "#ccda26"
},
"danish": {
"rgb": [
205,
219,
6
],
"hex": "#ccda06"
},
"buy": {
"rgb": [
205,
219,
171
],
"hex": "#ccdaaa"
},
"invite": {
"rgb": [
205,
219,
134
],
"hex": "#ccda85"
},
"both": {
"rgb": [
205,
219,
11
],
"hex": "#ccda0b"
},
"search": {
"rgb": [
205,
219,
176
],
"hex": "#ccdaaf"
},
"delivery": {
"rgb": [
205,
219,
161
],
"hex": "#ccdaa0"
},
"notifications": {
"rgb": [
205,
219,
120
],
"hex": "#ccda78"
},
"export": {
"rgb": [
205,
219,
39
],
"hex": "#ccda27"
},
"accept": {
"rgb": [
205,
219,
150
],
"hex": "#ccda95"
},
"copy": {
"rgb": [
205,
219,
80
],
"hex": "#ccda50"
},
"sound": {
"rgb": [
205,
219,
117
],
"hex": "#ccda75"
},
"distance": {
"rgb": [
205,
219,
32
],
"hex": "#ccda20"
},
"none": {
"rgb": [
205,
219,
29
],
"hex": "#ccda1d"
},
"translate": {
"rgb": [
205,
219,
33
],
"hex": "#ccda21"
},
"join": {
"rgb": [
205,
219,
142
],
"hex": "#ccda8d"
},
"default": {
"rgb": [
205,
219,
144
],
"hex": "#ccda8f"
},
"rate": {
"rgb": [
205,
219,
167
],
"hex": "#ccdaa6"
},
"future": {
"rgb": [
205,
219,
87
],
"hex": "#ccda57"
},
"install": {
"rgb": [
205,
219,
165
],
"hex": "#ccdaa4"
},
"side dishes": {
"rgb": [
205,
219,
108
],
"hex": "#ccda6c"
},
"male": {
"rgb": [
205,
219,
130
],
"hex": "#ccda81"
},
"agree": {
"rgb": [
205,
219,
174
],
"hex": "#ccdaad"
},
"delete": {
"rgb": [
205,
219,
183
],
"hex": "#ccdab6"
},
"sort": {
"rgb": [
205,
219,
91
],
"hex": "#ccda5b"
},
"stop": {
"rgb": [
205,
219,
113
],
"hex": "#ccda71"
},
"register": {
"rgb": [
205,
219,
140
],
"hex": "#ccda8b"
},
"scan": {
"rgb": [
205,
219,
76
],
"hex": "#ccda4c"
},
"share": {
"rgb": [
205,
219,
172
],
"hex": "#ccdaab"
},
"locations": {
"rgb": [
205,
219,
146
],
"hex": "#ccda91"
},
"one way": {
"rgb": [
205,
219,
25
],
"hex": "#ccda19"
},
"enable": {
"rgb": [
205,
219,
127
],
"hex": "#ccda7f"
},
"chat": {
"rgb": [
205,
219,
77
],
"hex": "#ccda4d"
},
"home": {
"rgb": [
205,
219,
157
],
"hex": "#ccda9c"
},
"close": {
"rgb": [
205,
219,
168
],
"hex": "#ccdaa7"
},
"breakfast": {
"rgb": [
205,
219,
82
],
"hex": "#ccda52"
},
"create": {
"rgb": [
205,
219,
188
],
"hex": "#ccdabb"
},
"calendar": {
"rgb": [
205,
219,
54
],
"hex": "#ccda36"
},
"swedish": {
"rgb": [
205,
219,
5
],
"hex": "#ccda05"
},
"no": {
"rgb": [
205,
219,
196
],
"hex": "#ccdac3"
},
"hybrid": {
"rgb": [
205,
219,
13
],
"hex": "#ccda0d"
},
"check": {
"rgb": [
205,
219,
153
],
"hex": "#ccda98"
},
"other": {
"rgb": [
205,
219,
100
],
"hex": "#ccda64"
},
"just once": {
"rgb": [
205,
219,
118
],
"hex": "#ccda76"
},
"online": {
"rgb": [
205,
219,
83
],
"hex": "#ccda53"
},
"terms of use": {
"rgb": [
205,
219,
73
],
"hex": "#ccda49"
},
"medium": {
"rgb": [
205,
219,
15
],
"hex": "#ccda0f"
},
"profile": {
"rgb": [
205,
219,
132
],
"hex": "#ccda83"
},
"map": {
"rgb": [
205,
219,
139
],
"hex": "#ccda8a"
},
"play": {
"rgb": [
205,
219,
158
],
"hex": "#ccda9d"
},
"finish": {
"rgb": [
205,
219,
175
],
"hex": "#ccdaae"
},
"normal": {
"rgb": [
205,
219,
22
],
"hex": "#ccda16"
},
"night mode": {
"rgb": [
205,
219,
18
],
"hex": "#ccda12"
},
"price": {
"rgb": [
205,
219,
89
],
"hex": "#ccda59"
},
"english": {
"rgb": [
205,
219,
106
],
"hex": "#ccda6a"
},
"update": {
"rgb": [
205,
219,
170
],
"hex": "#ccdaa9"
},
"malay": {
"rgb": [
205,
219,
8
],
"hex": "#ccda08"
},
"norwegian": {
"rgb": [
205,
219,
4
],
"hex": "#ccda04"
},
"favorites": {
"rgb": [
205,
219,
155
],
"hex": "#ccda9a"
},
"previous": {
"rgb": [
205,
219,
92
],
"hex": "#ccda5c"
},
"forgot password": {
"rgb": [
205,
219,
163
],
"hex": "#ccdaa2"
},
"gallery": {
"rgb": [
205,
219,
101
],
"hex": "#ccda65"
},
"purchase": {
"rgb": [
205,
219,
44
],
"hex": "#ccda2c"
},
"later": {
"rgb": [
205,
219,
127
],
"hex": "#ccda7f"
},
"daily": {
"rgb": [
205,
219,
115
],
"hex": "#ccda73"
},
"satellite": {
"rgb": [
205,
219,
60
],
"hex": "#ccda3c"
},
"contact": {
"rgb": [
205,
219,
149
],
"hex": "#ccda94"
},
"enter": {
"rgb": [
205,
219,
105
],
"hex": "#ccda69"
},
"rewards": {
"rgb": [
205,
219,
50
],
"hex": "#ccda32"
},
"uninstall": {
"rgb": [
205,
219,
24
],
"hex": "#ccda18"
}
}3. icon_legend.json
{
"shop": {
"rgb": [
20,
20,
20
],
"hex": "#141414"
},
"expand_less": {
"rgb": [
22,
22,
22
],
"hex": "#161616"
},
"help": {
"rgb": [
24,
24,
24
],
"hex": "#181818"
},
"photo": {
"rgb": [
26,
26,
26
],
"hex": "#1a1a1a"
},
"switcher": {
"rgb": [
28,
28,
28
],
"hex": "#1c1c1c"
},
"attach_file": {
"rgb": [
30,
30,
30
],
"hex": "#1e1e1e"
},
"follow": {
"rgb": [
32,
32,
32
],
"hex": "#202020"
},
"font": {
"rgb": [
34,
34,
34
],
"hex": "#222"
},
"layers": {
"rgb": [
36,
36,
36
],
"hex": "#242424"
},
"pause": {
"rgb": [
38,
38,
38
],
"hex": "#262626"
},
"group": {
"rgb": [
40,
40,
40
],
"hex": "#282828"
},
"menu": {
"rgb": [
42,
42,
42
],
"hex": "#2a2a2a"
},
"flash": {
"rgb": [
44,
44,
44
],
"hex": "#2c2c2c"
},
"send": {
"rgb": [
46,
46,
46
],
"hex": "#2e2e2e"
},
"add": {
"rgb": [
48,
48,
48
],
"hex": "#303030"
},
"swap": {
"rgb": [
50,
50,
50
],
"hex": "#323232"
},
"folder": {
"rgb": [
52,
52,
52
],
"hex": "#343434"
},
"save": {
"rgb": [
54,
54,
54
],
"hex": "#363636"
},
"expand_more": {
"rgb": [
56,
56,
56
],
"hex": "#383838"
},
"date_range": {
"rgb": [
58,
58,
58
],
"hex": "#3a3a3a"
},
"facebook": {
"rgb": [
60,
60,
60
],
"hex": "#3c3c3c"
},
"av_rewind": {
"rgb": [
62,
62,
62
],
"hex": "#3e3e3e"
},
"gift": {
"rgb": [
64,
64,
64
],
"hex": "#404040"
},
"settings": {
"rgb": [
66,
66,
66
],
"hex": "#424242"
},
"edit": {
"rgb": [
68,
68,
68
],
"hex": "#444"
},
"skip_next": {
"rgb": [
70,
70,
70
],
"hex": "#464646"
},
"list": {
"rgb": [
72,
72,
72
],
"hex": "#484848"
},
"refresh": {
"rgb": [
74,
74,
74
],
"hex": "#4a4a4a"
},
"avatar": {
"rgb": [
76,
76,
76
],
"hex": "#4c4c4c"
},
"dialpad": {
"rgb": [
126,
126,
126
],
"hex": "#7e7e7e"
},
"globe": {
"rgb": [
80,
80,
80
],
"hex": "#505050"
},
"bluetooth": {
"rgb": [
82,
82,
82
],
"hex": "#525252"
},
"close": {
"rgb": [
84,
84,
84
],
"hex": "#545454"
},
"fullscreen": {
"rgb": [
86,
86,
86
],
"hex": "#565656"
},
"thumbs_up": {
"rgb": [
88,
88,
88
],
"hex": "#585858"
},
"label": {
"rgb": [
90,
90,
90
],
"hex": "#5a5a5a"
},
"reply": {
"rgb": [
92,
92,
92
],
"hex": "#5c5c5c"
},
"email": {
"rgb": [
94,
94,
94
],
"hex": "#5e5e5e"
},
"power": {
"rgb": [
96,
96,
96
],
"hex": "#606060"
},
"undo": {
"rgb": [
98,
98,
98
],
"hex": "#626262"
},
"explore": {
"rgb": [
100,
100,
100
],
"hex": "#646464"
},
"cart": {
"rgb": [
102,
102,
102
],
"hex": "#666"
},
"videocam": {
"rgb": [
104,
104,
104
],
"hex": "#686868"
},
"search": {
"rgb": [
106,
106,
106
],
"hex": "#6a6a6a"
},
"launch": {
"rgb": [
108,
108,
108
],
"hex": "#6c6c6c"
},
"arrow_backward": {
"rgb": [
110,
110,
110
],
"hex": "#6e6e6e"
},
"favorite": {
"rgb": [
112,
112,
112
],
"hex": "#707070"
},
"filter": {
"rgb": [
116,
116,
116
],
"hex": "#747474"
},
"delete": {
"rgb": [
118,
118,
118
],
"hex": "#767676"
},
"navigation": {
"rgb": [
120,
120,
120
],
"hex": "#787878"
},
"file_download": {
"rgb": [
122,
122,
122
],
"hex": "#7a7a7a"
},
"weather": {
"rgb": [
124,
124,
124
],
"hex": "#7c7c7c"
},
"network_wifi": {
"rgb": [
78,
78,
78
],
"hex": "#4e4e4e"
},
"redo": {
"rgb": [
128,
128,
128
],
"hex": "#7f7f7f"
},
"emoji": {
"rgb": [
130,
130,
130
],
"hex": "#818181"
},
"playlist": {
"rgb": [
132,
132,
132
],
"hex": "#838383"
},
"bookmark": {
"rgb": [
134,
134,
134
],
"hex": "#858585"
},
"music": {
"rgb": [
138,
138,
138
],
"hex": "#898989"
},
"call": {
"rgb": [
136,
136,
136
],
"hex": "#878787"
},
"twitter": {
"rgb": [
140,
140,
140
],
"hex": "#8b8b8b"
},
"location": {
"rgb": [
114,
114,
114
],
"hex": "#727272"
},
"flight": {
"rgb": [
144,
144,
144
],
"hex": "#8f8f8f"
},
"visibility": {
"rgb": [
146,
146,
146
],
"hex": "#919191"
},
"volume": {
"rgb": [
148,
148,
148
],
"hex": "#939393"
},
"notifications": {
"rgb": [
150,
150,
150
],
"hex": "#959595"
},
"av_forward": {
"rgb": [
152,
152,
152
],
"hex": "#979797"
},
"location_crosshair": {
"rgb": [
154,
154,
154
],
"hex": "#999"
},
"copy": {
"rgb": [
156,
156,
156
],
"hex": "#9b9b9b"
},
"info": {
"rgb": [
158,
158,
158
],
"hex": "#9d9d9d"
},
"skip_previous": {
"rgb": [
160,
160,
160
],
"hex": "#9f9f9f"
},
"arrow_downward": {
"rgb": [
162,
162,
162
],
"hex": "#a1a1a1"
},
"dashboard": {
"rgb": [
164,
164,
164
],
"hex": "#a3a3a3"
},
"more": {
"rgb": [
142,
142,
142
],
"hex": "#8d8d8d"
},
"minus": {
"rgb": [
166,
166,
166
],
"hex": "#a5a5a5"
},
"history": {
"rgb": [
168,
168,
168
],
"hex": "#a7a7a7"
},
"compare": {
"rgb": [
170,
170,
170
],
"hex": "#a9a9a9"
},
"lock": {
"rgb": [
172,
172,
172
],
"hex": "#ababab"
},
"national_flag": {
"rgb": [
174,
174,
174
],
"hex": "#adadad"
},
"share": {
"rgb": [
176,
176,
176
],
"hex": "#afafaf"
},
"warning": {
"rgb": [
178,
178,
178
],
"hex": "#b1b1b1"
},
"chat": {
"rgb": [
180,
180,
180
],
"hex": "#b3b3b3"
},
"home": {
"rgb": [
182,
182,
182
],
"hex": "#b5b5b5"
},
"arrow_forward": {
"rgb": [
184,
184,
184
],
"hex": "#b7b7b7"
},
"check": {
"rgb": [
186,
186,
186
],
"hex": "#b9b9b9"
},
"microphone": {
"rgb": [
188,
188,
188
],
"hex": "#bbb"
},
"sliders": {
"rgb": [
190,
190,
190
],
"hex": "#bdbdbd"
},
"book": {
"rgb": [
192,
192,
192
],
"hex": "#bfbfbf"
},
"build": {
"rgb": [
194,
194,
194
],
"hex": "#c1c1c1"
},
"play": {
"rgb": [
196,
196,
196
],
"hex": "#c3c3c3"
},
"repeat": {
"rgb": [
198,
198,
198
],
"hex": "#c5c5c5"
},
"star": {
"rgb": [
200,
200,
200
],
"hex": "#c7c7c7"
},
"description": {
"rgb": [
202,
202,
202
],
"hex": "#c9c9c9"
},
"wallpaper": {
"rgb": [
204,
204,
204
],
"hex": "#cbcbcb"
},
"arrow_upward": {
"rgb": [
206,
206,
206
],
"hex": "#cdcdcd"
},
"filter_list": {
"rgb": [
208,
208,
208
],
"hex": "#cfcfcf"
},
"thumbs_down": {
"rgb": [
210,
210,
210
],
"hex": "#d1d1d1"
},
"time": {
"rgb": [
212,
212,
212
],
"hex": "#d3d3d3"
}
}
꺌꺌률리