Color
Colors are a clear way to convey meaning in design. Over time, we associate colors with specific meanings based on their context and frequency of use. In the Workleap ecosystem, each color complements the others and has a specific role.
Guidelines
- Communication is key - Although we value an aesthetically pleasing use of colour, we place a higher value on clear communication. Colour supports the purpose of the content, communicating things like hierarchy, interactive states and differences between visual elements.
- Colours have meaning - Each colour has assigned sentiment based on how they function within the interface. Defined colour roles make things easy to modify and customize later. Their meaning is also expanded to all Workleap verticals so that users understand that they’re in the same ecosystem and can recognize its codes.
Deprecation notice
Tokens with the -active suffix are deprecated and should not be used in new code. They will be removed in a future release. Prefer using their -press counterparts. In some instances, -active tokens should be replaced with -selected tokens. This should be documented in your Figma files. If in doubt, validate with a designer.
Tokens
Neutral
| Name | Value | Preview |
|---|---|---|
--hop-neutral-border-active | #777775 | |
--hop-neutral-icon-active | #292929 | |
--hop-neutral-icon-weak-active | #505050 | |
--hop-neutral-surface-active | #ecebe8 | |
--hop-neutral-surface-weak-active | #ccccca | |
--hop-neutral-text-active | #292929 | |
--hop-neutral-text-weak-active | #505050 | |
--hop-neutral-border | #b3b3b1 | |
--hop-neutral-border-selected | #3c3c3c | |
--hop-neutral-border-disabled | #ecebe8 | |
--hop-neutral-border-hover | #959593 | |
--hop-neutral-border-press | #777775 | |
--hop-neutral-border-strong | #3c3c3c | |
--hop-neutral-border-strong-hover | #505050 | |
--hop-neutral-border-weak | #e0dfdd | |
--hop-neutral-border-weakest | #ecebe8 | |
--hop-neutral-icon | #3c3c3c | |
--hop-neutral-icon-selected | #ffffff | |
--hop-neutral-icon-disabled | #959593 | |
--hop-neutral-icon-hover | #505050 | |
--hop-neutral-icon-press | #292929 | |
--hop-neutral-icon-strong | #ffffff | |
--hop-neutral-icon-strong-hover | #ffffff | |
--hop-neutral-icon-weak | #777775 | |
--hop-neutral-icon-weak-hover | #636362 | |
--hop-neutral-icon-weak-press | #505050 | |
--hop-neutral-icon-weak-selected | #636362 | |
--hop-neutral-icon-weakest | #b3b3b1 | |
--hop-neutral-surface | #ffffff | |
--hop-neutral-surface-selected | #3c3c3c | |
--hop-neutral-surface-disabled | #ecebe8 | |
--hop-neutral-surface-hover | #f8f6f3 | |
--hop-neutral-surface-press | #ecebe8 | |
--hop-neutral-surface-strong | #3c3c3c | |
--hop-neutral-surface-weak | #ecebe8 | |
--hop-neutral-surface-weak-selected | #ecebe8 | |
--hop-neutral-surface-weak-hover | #e0dfdd | |
--hop-neutral-surface-weak-press | #ccccca | |
--hop-neutral-surface-weakest | #f8f6f3 | |
--hop-neutral-surface-weakest-selected | #ecebe8 | |
--hop-neutral-surface-weakest-hover | #ecebe8 | |
--hop-neutral-text | #3c3c3c | |
--hop-neutral-text-selected | #ffffff | |
--hop-neutral-text-disabled | #959593 | |
--hop-neutral-text-hover | #505050 | |
--hop-neutral-text-press | #292929 | |
--hop-neutral-text-strong | #ffffff | |
--hop-neutral-text-weak | #6c6c6b | |
--hop-neutral-text-weak-hover | #636362 | |
--hop-neutral-text-weak-press | #505050 | |
--hop-neutral-text-weak-selected | #636362 | |
--hop-neutral-text-weakest | #959593 |
Primary
| Name | Value | Preview |
|---|---|---|
--hop-primary-border-active | #6c8ffd | |
--hop-primary-icon-active | #2040c7 | |
--hop-primary-surface-active | #6c8ffd | |
--hop-primary-surface-strong-active | #2040c7 | |
--hop-primary-surface-weak-active | #d6e0ff | |
--hop-primary-text-active | #2040c7 | |
--hop-primary-border | #4767fe | |
--hop-primary-border-selected | #4767fe | |
--hop-primary-border-focus | #3b57ff | |
--hop-primary-border-press | #6c8ffd | |
--hop-primary-icon | #3b57ff | |
--hop-primary-icon-selected | #3b57ff | |
--hop-primary-icon-disabled | #95b1ff | |
--hop-primary-icon-hover | #2a43e8 | |
--hop-primary-icon-press | #2040c7 | |
--hop-primary-icon-strong | #ffffff | |
--hop-primary-icon-strong-hover | #ffffff | |
--hop-primary-surface | #e6ebff | |
--hop-primary-surface-selected | #e6ebff | |
--hop-primary-surface-disabled | #95b1ff | |
--hop-primary-surface-focus | #f5f6ff | |
--hop-primary-surface-hover | #95b1ff | |
--hop-primary-surface-press | #6c8ffd | |
--hop-primary-surface-strong | #4767fe | |
--hop-primary-surface-strong-selected | #e6ebff | |
--hop-primary-surface-strong-hover | #2a43e8 | |
--hop-primary-surface-strong-press | #2040c7 | |
--hop-primary-surface-weak | #f5f6ff | |
--hop-primary-surface-weak-hover | #e6ebff | |
--hop-primary-surface-weak-press | #d6e0ff | |
--hop-primary-text | #3b57ff | |
--hop-primary-text-selected | #3b57ff | |
--hop-primary-text-disabled | #95b1ff | |
--hop-primary-text-hover | #2a43e8 | |
--hop-primary-text-press | #2040c7 | |
--hop-primary-text-strong | #ffffff | |
--hop-primary-text-strong-hover | #ffffff |
Success
| Name | Value | Preview |
|---|---|---|
--hop-success-border | #aad89d | |
--hop-success-icon | #115a52 | |
--hop-success-icon-weakest | #aad89d | |
--hop-success-icon-weak | #47a584 | |
--hop-success-surface | #f4f9e9 | |
--hop-success-surface-strong | #aad89d | |
--hop-success-surface-weak | #e3f3b9 | |
--hop-success-text | #115a52 | |
--hop-success-text-hover | #16433d | |
--hop-success-text-weak | #47a584 |
Warning
| Name | Value | Preview |
|---|---|---|
--hop-warning-border | #ffbf92 | |
--hop-warning-icon | #8c3504 | |
--hop-warning-icon-weakest | #ffbf92 | |
--hop-warning-icon-weak | #e57723 | |
--hop-warning-surface | #fff5e9 | |
--hop-warning-surface-strong | #ffbf92 | |
--hop-warning-surface-weak | #ffe8d3 | |
--hop-warning-text | #8c3504 | |
--hop-warning-text-weak | #e57723 |
Danger
| Name | Value | Preview |
|---|---|---|
--hop-danger-border-active | #ba2d2d | |
--hop-danger-icon-active | #6c2320 | |
--hop-danger-icon-weak-active | #ba2d2d | |
--hop-danger-surface-active | #ba2d2d | |
--hop-danger-surface-weak-active | #ffbcb7 | |
--hop-danger-text-active | #6c2320 | |
--hop-danger-text-weak-active | #ba2d2d | |
--hop-danger-border | #ffbcb7 | |
--hop-danger-border-selected | #fa4d59 | |
--hop-danger-border-strong | #fa4d59 | |
--hop-danger-border-press | #ba2d2d | |
--hop-danger-icon | #952927 | |
--hop-danger-icon-selected | #df3236 | |
--hop-danger-icon-disabled | #ffbcb7 | |
--hop-danger-icon-hover | #cb2e31 | |
--hop-danger-icon-press | #6c2320 | |
--hop-danger-icon-strong | #ffffff | |
--hop-danger-icon-strong-hover | #ffffff | |
--hop-danger-icon-weak | #fa4d59 | |
--hop-danger-icon-weak-hover | #cb2e31 | |
--hop-danger-icon-weak-press | #ba2d2d | |
--hop-danger-surface | #fdf6f6 | |
--hop-danger-surface-selected | #fde6e5 | |
--hop-danger-surface-disabled | #ffbcb7 | |
--hop-danger-surface-hover | #cb2e31 | |
--hop-danger-surface-press | #ba2d2d | |
--hop-danger-surface-strong | #df3236 | |
--hop-danger-surface-strong-hover | #cb2e31 | |
--hop-danger-surface-weak | #fde6e5 | |
--hop-danger-surface-weak-hover | #ffd6d3 | |
--hop-danger-surface-weak-press | #ffbcb7 | |
--hop-danger-text | #952927 | |
--hop-danger-text-selected | #df3236 | |
--hop-danger-text-disabled | #ffbcb7 | |
--hop-danger-text-hover | #cb2e31 | |
--hop-danger-text-press | #6c2320 | |
--hop-danger-text-strong | #ffffff | |
--hop-danger-text-strong-hover | #ffffff | |
--hop-danger-text-weak | #df3236 | |
--hop-danger-text-weak-hover | #cb2e31 | |
--hop-danger-text-weak-press | #ba2d2d |
Information
| Name | Value | Preview |
|---|---|---|
--hop-information-border | #9fd2f7 | |
--hop-information-icon | #0a538b | |
--hop-information-icon-weakest | #bae6ff | |
--hop-information-icon-weak | #5d9acd | |
--hop-information-surface | #f0f8ff | |
--hop-information-surface-strong | #9fd2f7 | |
--hop-information-surface-weak | #d9efff | |
--hop-information-text | #003d70 | |
--hop-information-text-weak | #5d9acd |
Upsell
| Name | Value | Preview |
|---|---|---|
--hop-upsell-border-active | #e2a934 | |
--hop-upsell-icon-active | #2f250d | |
--hop-upsell-icon-weak-active | #7e5e0a | |
--hop-upsell-surface-active | #e2a934 | |
--hop-upsell-surface-weak-active | #f7e694 | |
--hop-upsell-text-active | #2f250d | |
--hop-upsell-text-weak-active | #7e5e0a | |
--hop-upsell-border | #eac96d | |
--hop-upsell-border-selected | #e2a934 | |
--hop-upsell-border-disabled | #f7e694 | |
--hop-upsell-border-press | #e2a934 | |
--hop-upsell-icon | #654c0d | |
--hop-upsell-icon-selected | #996f08 | |
--hop-upsell-icon-hover | #4b390f | |
--hop-upsell-icon-press | #2f250d | |
--hop-upsell-icon-weakest | #f7e694 | |
--hop-upsell-icon-weak | #eac96d | |
--hop-upsell-icon-weak-hover | #8b6609 | |
--hop-upsell-icon-weak-press | #7e5e0a | |
--hop-upsell-surface | #f7e694 | |
--hop-upsell-surface-selected | #fff2b8 | |
--hop-upsell-surface-disabled | #fff8d6 | |
--hop-upsell-surface-hover | #eac96d | |
--hop-upsell-surface-press | #e2a934 | |
--hop-upsell-surface-weak | #fff8d6 | |
--hop-upsell-surface-weak-hover | #fff2b8 | |
--hop-upsell-surface-weak-press | #f7e694 | |
--hop-upsell-text | #654c0d | |
--hop-upsell-text-selected | #996f08 | |
--hop-upsell-text-disabled | #996f08 | |
--hop-upsell-text-hover | #4b390f | |
--hop-upsell-text-press | #2f250d | |
--hop-upsell-text-weak | #c28b12 | |
--hop-upsell-text-weak-hover | #8b6609 | |
--hop-upsell-text-weak-press | #7e5e0a |
Decorative
Option 1
| Name | Value | Preview |
|---|---|---|
--hop-decorative-option1-border | #b9cbff | |
--hop-decorative-option1-icon | #152450 | |
--hop-decorative-option1-surface | #b9cbff | |
--hop-decorative-option1-surface-hover | #95b1ff | |
--hop-decorative-option1-surface-strong | #95b1ff | |
--hop-decorative-option1-surface-weak | #e6ebff | |
--hop-decorative-option1-surface-weak-hover | #d6e0ff | |
--hop-decorative-option1-surface-weakest | #f5f6ff | |
--hop-decorative-option1-text | #152450 | |
--hop-decorative-option1-text-weak | #6c8ffd |
Option 2
| Name | Value | Preview |
|---|---|---|
--hop-decorative-option2-border | #a3d6cb | |
--hop-decorative-option2-icon | #002d1c | |
--hop-decorative-option2-surface | #bde8e1 | |
--hop-decorative-option2-surface-hover | #a3d6cb | |
--hop-decorative-option2-surface-strong | #a3d6cb | |
--hop-decorative-option2-surface-weak | #cff4ef | |
--hop-decorative-option2-surface-weak-hover | #bde8e1 | |
--hop-decorative-option2-surface-weakest | #ddfdf9 | |
--hop-decorative-option2-text | #002d1c | |
--hop-decorative-option2-text-weak | #5da18c |
Option 3
| Name | Value | Preview |
|---|---|---|
--hop-decorative-option3-border | #ffbf92 | |
--hop-decorative-option3-icon | #451a02 | |
--hop-decorative-option3-surface | #ffbf92 | |
--hop-decorative-option3-surface-hover | #ff9b3f | |
--hop-decorative-option3-surface-strong | #ff9b3f | |
--hop-decorative-option3-surface-weak | #ffe8d3 | |
--hop-decorative-option3-surface-weak-hover | #ffd8be | |
--hop-decorative-option3-surface-weakest | #fff5e9 | |
--hop-decorative-option3-text | #451a02 | |
--hop-decorative-option3-text-weak | #e57723 |
Option 4
| Name | Value | Preview |
|---|---|---|
--hop-decorative-option4-border | #aad89d | |
--hop-decorative-option4-icon | #132a27 | |
--hop-decorative-option4-surface | #cde8ac | |
--hop-decorative-option4-surface-hover | #aad89d | |
--hop-decorative-option4-surface-strong | #aad89d | |
--hop-decorative-option4-surface-weak | #e3f3b9 | |
--hop-decorative-option4-surface-weak-hover | #cde8ac | |
--hop-decorative-option4-surface-weakest | #f4f9e9 | |
--hop-decorative-option4-text | #132a27 | |
--hop-decorative-option4-text-weak | #188a71 |
Option 5
| Name | Value | Preview |
|---|---|---|
--hop-decorative-option5-border | #9fd2f7 | |
--hop-decorative-option5-icon | #00274b | |
--hop-decorative-option5-surface | #bae6ff | |
--hop-decorative-option5-surface-hover | #9fd2f7 | |
--hop-decorative-option5-surface-strong | #9fd2f7 | |
--hop-decorative-option5-surface-weak | #d9efff | |
--hop-decorative-option5-surface-weak-hover | #bae6ff | |
--hop-decorative-option5-surface-weakest | #f0f8ff | |
--hop-decorative-option5-text | #00274b | |
--hop-decorative-option5-text-weak | #5d9acd |
Option 6
| Name | Value | Preview |
|---|---|---|
--hop-decorative-option6-border | #eac96d | |
--hop-decorative-option6-icon | #2f250d | |
--hop-decorative-option6-surface | #f7e694 | |
--hop-decorative-option6-surface-hover | #eac96d | |
--hop-decorative-option6-surface-strong | #eac96d | |
--hop-decorative-option6-surface-weak | #fff2b8 | |
--hop-decorative-option6-surface-weak-hover | #f7e694 | |
--hop-decorative-option6-surface-weakest | #fff8d6 | |
--hop-decorative-option6-text | #2f250d | |
--hop-decorative-option6-text-weak | #e2a934 |
Option 7
| Name | Value | Preview |
|---|---|---|
--hop-decorative-option7-border | #d4cbc0 | |
--hop-decorative-option7-icon | #2a2620 | |
--hop-decorative-option7-surface | #e5ded6 | |
--hop-decorative-option7-surface-hover | #d4cbc0 | |
--hop-decorative-option7-surface-strong | #d4cbc0 | |
--hop-decorative-option7-surface-weak | #f0eae3 | |
--hop-decorative-option7-surface-weak-hover | #e5ded6 | |
--hop-decorative-option7-surface-weakest | #fef6ef | |
--hop-decorative-option7-text | #2a2620 | |
--hop-decorative-option7-text-weak | #776a59 |
Option 8
| Name | Value | Preview |
|---|---|---|
--hop-decorative-option8-border | #ffbcb7 | |
--hop-decorative-option8-icon | #431a17 | |
--hop-decorative-option8-surface | #ffd6d3 | |
--hop-decorative-option8-surface-hover | #ff8e8e | |
--hop-decorative-option8-surface-strong | #ffbcb7 | |
--hop-decorative-option8-surface-weak | #fde6e5 | |
--hop-decorative-option8-surface-weak-hover | #ffd6d3 | |
--hop-decorative-option8-surface-weakest | #fdf6f6 | |
--hop-decorative-option8-text | #431a17 | |
--hop-decorative-option8-text-weak | #fa4d59 |
Option 9
| Name | Value | Preview |
|---|---|---|
--hop-decorative-option9-border | #ccccca | |
--hop-decorative-option9-icon | #ffffff | |
--hop-decorative-option9-surface | #777775 | |
--hop-decorative-option9-surface-hover | #6c6c6b | |
--hop-decorative-option9-surface-strong | #3c3c3c | |
--hop-decorative-option9-surface-weak | #959593 | |
--hop-decorative-option9-surface-weak-hover | #777775 | |
--hop-decorative-option9-surface-weakest | #b3b3b1 | |
--hop-decorative-option9-text | #ffffff | |
--hop-decorative-option9-text-weak | #959593 |
Status
Neutral
| Name | Value | Preview |
|---|---|---|
--hop-status-neutral-border | #3c3c3c | |
--hop-status-neutral-border-disabled | #ecebe8 | |
--hop-status-neutral-border-hover | #505050 | |
--hop-status-neutral-border-press | #292929 | |
--hop-status-neutral-border-selected | #3c3c3c | |
--hop-status-neutral-icon | #3c3c3c | |
--hop-status-neutral-icon-disabled | #959593 | |
--hop-status-neutral-icon-hover | #505050 | |
--hop-status-neutral-icon-press | #292929 | |
--hop-status-neutral-icon-selected | #ffffff | |
--hop-status-neutral-surface | #ffffff | |
--hop-status-neutral-surface-disabled | #ecebe8 | |
--hop-status-neutral-surface-hover | #f8f6f3 | |
--hop-status-neutral-surface-press | #ecebe8 | |
--hop-status-neutral-surface-selected | #3c3c3c | |
--hop-status-neutral-surface-strong | #b3b3b1 | |
--hop-status-neutral-text | #3c3c3c | |
--hop-status-neutral-text-disabled | #959593 | |
--hop-status-neutral-text-hover | #505050 | |
--hop-status-neutral-text-press | #292929 | |
--hop-status-neutral-text-selected | #ffffff |
Progress
| Name | Value | Preview |
|---|---|---|
--hop-status-progress-border | #6c8ffd | |
--hop-status-progress-border-disabled | #e6ebff | |
--hop-status-progress-border-hover | #4767fe | |
--hop-status-progress-border-press | #3b57ff | |
--hop-status-progress-border-selected | #4767fe | |
--hop-status-progress-icon | #2a43e8 | |
--hop-status-progress-icon-disabled | #95b1ff | |
--hop-status-progress-icon-hover | #2040c7 | |
--hop-status-progress-icon-press | #1b3587 | |
--hop-status-progress-icon-selected | #3b57ff | |
--hop-status-progress-surface | #e6ebff | |
--hop-status-progress-surface-disabled | #f5f6ff | |
--hop-status-progress-surface-hover | #d6e0ff | |
--hop-status-progress-surface-press | #b9cbff | |
--hop-status-progress-surface-selected | #e6ebff | |
--hop-status-progress-surface-strong | #95b1ff | |
--hop-status-progress-text | #2a43e8 | |
--hop-status-progress-text-disabled | #95b1ff | |
--hop-status-progress-text-hover | #2040c7 | |
--hop-status-progress-text-press | #1b3587 | |
--hop-status-progress-text-selected | #3b57ff |
Positive
| Name | Value | Preview |
|---|---|---|
--hop-status-positive-border | #47a584 | |
--hop-status-positive-border-disabled | #e3f3b9 | |
--hop-status-positive-border-hover | #188a71 | |
--hop-status-positive-border-press | #0c796b | |
--hop-status-positive-border-selected | #115a52 | |
--hop-status-positive-icon | #0a6f64 | |
--hop-status-positive-icon-disabled | #7dc291 | |
--hop-status-positive-icon-hover | #115a52 | |
--hop-status-positive-icon-press | #16433d | |
--hop-status-positive-icon-selected | #115a52 | |
--hop-status-positive-surface | #e3f3b9 | |
--hop-status-positive-surface-disabled | #f4f9e9 | |
--hop-status-positive-surface-hover | #cde8ac | |
--hop-status-positive-surface-press | #aad89d | |
--hop-status-positive-surface-selected | #e3f3b9 | |
--hop-status-positive-surface-strong | #7dc291 | |
--hop-status-positive-text | #0a6f64 | |
--hop-status-positive-text-disabled | #7dc291 | |
--hop-status-positive-text-hover | #115a52 | |
--hop-status-positive-text-press | #16433d | |
--hop-status-positive-text-selected | #115a52 |
Caution
| Name | Value | Preview |
|---|---|---|
--hop-status-caution-border | #e57723 | |
--hop-status-caution-border-disabled | #ffe8d3 | |
--hop-status-caution-border-hover | #c95109 | |
--hop-status-caution-border-press | #ba4705 | |
--hop-status-caution-border-selected | #8c3504 | |
--hop-status-caution-icon | #ab4104 | |
--hop-status-caution-icon-disabled | #ff9b3f | |
--hop-status-caution-icon-hover | #8c3504 | |
--hop-status-caution-icon-press | #692803 | |
--hop-status-caution-icon-selected | #8c3504 | |
--hop-status-caution-surface | #ffe8d3 | |
--hop-status-caution-surface-disabled | #fff5e9 | |
--hop-status-caution-surface-hover | #ffd8be | |
--hop-status-caution-surface-press | #ffbf92 | |
--hop-status-caution-surface-selected | #ffe8d3 | |
--hop-status-caution-surface-strong | #ff9b3f | |
--hop-status-caution-text | #ab4104 | |
--hop-status-caution-text-disabled | #ff9b3f | |
--hop-status-caution-text-hover | #8c3504 | |
--hop-status-caution-text-press | #692803 | |
--hop-status-caution-text-selected | #8c3504 |
Negative
| Name | Value | Preview |
|---|---|---|
--hop-status-negative-border | #fa4d59 | |
--hop-status-negative-border-disabled | #fde6e5 | |
--hop-status-negative-border-hover | #df3236 | |
--hop-status-negative-border-press | #cb2e31 | |
--hop-status-negative-border-selected | #952927 | |
--hop-status-negative-icon | #ba2d2d | |
--hop-status-negative-icon-disabled | #ff8e8e | |
--hop-status-negative-icon-hover | #952927 | |
--hop-status-negative-icon-press | #6c2320 | |
--hop-status-negative-icon-selected | #952927 | |
--hop-status-negative-surface | #fde6e5 | |
--hop-status-negative-surface-disabled | #fdf6f6 | |
--hop-status-negative-surface-hover | #ffd6d3 | |
--hop-status-negative-surface-press | #ffbcb7 | |
--hop-status-negative-surface-selected | #fde6e5 | |
--hop-status-negative-surface-strong | #ff8e8e | |
--hop-status-negative-text | #ba2d2d | |
--hop-status-negative-text-disabled | #ff8e8e | |
--hop-status-negative-text-hover | #952927 | |
--hop-status-negative-text-press | #6c2320 | |
--hop-status-negative-text-selected | #952927 |
Inactive
| Name | Value | Preview |
|---|---|---|
--hop-status-inactive-border | #959593 | |
--hop-status-inactive-border-disabled | #ecebe8 | |
--hop-status-inactive-border-hover | #777775 | |
--hop-status-inactive-border-press | #6c6c6b | |
--hop-status-inactive-border-selected | #505050 | |
--hop-status-inactive-icon | #636362 | |
--hop-status-inactive-icon-disabled | #b3b3b1 | |
--hop-status-inactive-icon-hover | #505050 | |
--hop-status-inactive-icon-press | #3c3c3c | |
--hop-status-inactive-icon-selected | #505050 | |
--hop-status-inactive-surface | #ecebe8 | |
--hop-status-inactive-surface-disabled | #f8f6f3 | |
--hop-status-inactive-surface-hover | #e0dfdd | |
--hop-status-inactive-surface-press | #ccccca | |
--hop-status-inactive-surface-selected | #ecebe8 | |
--hop-status-inactive-surface-strong | #ccccca | |
--hop-status-inactive-text | #636362 | |
--hop-status-inactive-text-disabled | #b3b3b1 | |
--hop-status-inactive-text-hover | #505050 | |
--hop-status-inactive-text-press | #3c3c3c | |
--hop-status-inactive-text-selected | #505050 |
Option 1
| Name | Value | Preview |
|---|---|---|
--hop-status-option1-border | #5d9acd | |
--hop-status-option1-border-disabled | #d9efff | |
--hop-status-option1-border-hover | #3a7bb2 | |
--hop-status-option1-border-press | #2e70a8 | |
--hop-status-option1-border-selected | #0a538b | |
--hop-status-option1-icon | #23669f | |
--hop-status-option1-icon-disabled | #81b9e4 | |
--hop-status-option1-icon-hover | #0a538b | |
--hop-status-option1-icon-press | #003d70 | |
--hop-status-option1-icon-selected | #0a538b | |
--hop-status-option1-surface | #d9efff | |
--hop-status-option1-surface-disabled | #f0f8ff | |
--hop-status-option1-surface-hover | #bae6ff | |
--hop-status-option1-surface-press | #9fd2f7 | |
--hop-status-option1-surface-selected | #d9efff | |
--hop-status-option1-surface-strong | #81b9e4 | |
--hop-status-option1-text | #23669f | |
--hop-status-option1-text-disabled | #81b9e4 | |
--hop-status-option1-text-hover | #0a538b | |
--hop-status-option1-text-press | #003d70 | |
--hop-status-option1-text-selected | #0a538b |
Option 2
| Name | Value | Preview |
|---|---|---|
--hop-status-option2-border | #8d91dc | |
--hop-status-option2-border-disabled | #eae9fb | |
--hop-status-option2-border-hover | #6b6ecc | |
--hop-status-option2-border-press | #5f61c5 | |
--hop-status-option2-border-selected | #433fac | |
--hop-status-option2-icon | #5454be | |
--hop-status-option2-icon-disabled | #aeb3e8 | |
--hop-status-option2-icon-hover | #433fac | |
--hop-status-option2-icon-press | #322b8d | |
--hop-status-option2-icon-selected | #433fac | |
--hop-status-option2-surface | #eae9fb | |
--hop-status-option2-surface-disabled | #f6f5ff | |
--hop-status-option2-surface-hover | #ddddf7 | |
--hop-status-option2-surface-press | #c8caf0 | |
--hop-status-option2-surface-selected | #eae9fb | |
--hop-status-option2-surface-strong | #aeb3e8 | |
--hop-status-option2-text | #5454be | |
--hop-status-option2-text-disabled | #aeb3e8 | |
--hop-status-option2-text-hover | #433fac | |
--hop-status-option2-text-press | #322b8d | |
--hop-status-option2-text-selected | #433fac |
Option 3
| Name | Value | Preview |
|---|---|---|
--hop-status-option3-border | #5da18c | |
--hop-status-option3-border-disabled | #cff4ef | |
--hop-status-option3-border-hover | #38836a | |
--hop-status-option3-border-press | #2b795e | |
--hop-status-option3-border-selected | #cff4ef | |
--hop-status-option3-icon | #206f54 | |
--hop-status-option3-icon-disabled | #83beaf | |
--hop-status-option3-icon-hover | #055c41 | |
--hop-status-option3-icon-press | #00452d | |
--hop-status-option3-icon-selected | #055c41 | |
--hop-status-option3-surface | #cff4ef | |
--hop-status-option3-surface-disabled | #ddfdf9 | |
--hop-status-option3-surface-hover | #bde8e1 | |
--hop-status-option3-surface-press | #a3d6cb | |
--hop-status-option3-surface-selected | #055c41 | |
--hop-status-option3-surface-strong | #83beaf | |
--hop-status-option3-text | #206f54 | |
--hop-status-option3-text-disabled | #83beaf | |
--hop-status-option3-text-hover | #055c41 | |
--hop-status-option3-text-press | #00452d | |
--hop-status-option3-text-selected | #055c41 |
Option 4
| Name | Value | Preview |
|---|---|---|
--hop-status-option4-border | #7c9aa3 | |
--hop-status-option4-border-disabled | #e1eef1 | |
--hop-status-option4-border-hover | #5e7b84 | |
--hop-status-option4-border-press | #557079 | |
--hop-status-option4-border-selected | #40535a | |
--hop-status-option4-icon | #4e6770 | |
--hop-status-option4-icon-disabled | #9cb7be | |
--hop-status-option4-icon-hover | #40535a | |
--hop-status-option4-icon-press | #313e43 | |
--hop-status-option4-icon-selected | #40535a | |
--hop-status-option4-surface | #e1eef1 | |
--hop-status-option4-surface-disabled | #f2f8fa | |
--hop-status-option4-surface-hover | #d2e3e7 | |
--hop-status-option4-surface-press | #bad0d5 | |
--hop-status-option4-surface-selected | #e1eef1 | |
--hop-status-option4-surface-strong | #9cb7be | |
--hop-status-option4-text | #4e6770 | |
--hop-status-option4-text-disabled | #9cb7be | |
--hop-status-option4-text-hover | #40535a | |
--hop-status-option4-text-press | #313e43 | |
--hop-status-option4-text-selected | #40535a |
Option 5
| Name | Value | Preview |
|---|---|---|
--hop-status-option5-border | #a19382 | |
--hop-status-option5-border-disabled | #f0eae3 | |
--hop-status-option5-border-hover | #837463 | |
--hop-status-option5-border-press | #776a59 | |
--hop-status-option5-border-selected | #594f41 | |
--hop-status-option5-icon | #6e6151 | |
--hop-status-option5-icon-disabled | #bdb1a3 | |
--hop-status-option5-icon-hover | #594f41 | |
--hop-status-option5-icon-press | #433b31 | |
--hop-status-option5-icon-selected | #594f41 | |
--hop-status-option5-surface | #f0eae3 | |
--hop-status-option5-surface-disabled | #fef6ef | |
--hop-status-option5-surface-hover | #e5ded6 | |
--hop-status-option5-surface-press | #d4cbc0 | |
--hop-status-option5-surface-selected | #f0eae3 | |
--hop-status-option5-surface-strong | #bdb1a3 | |
--hop-status-option5-text | #6e6151 | |
--hop-status-option5-text-disabled | #bdb1a3 | |
--hop-status-option5-text-hover | #594f41 | |
--hop-status-option5-text-press | #433b31 | |
--hop-status-option5-text-selected | #594f41 |
Option 6
| Name | Value | Preview |
|---|---|---|
--hop-status-option6-border | #c28b12 | |
--hop-status-option6-border-disabled | #fff2b8 | |
--hop-status-option6-border-hover | #996f08 | |
--hop-status-option6-border-press | #8b6609 | |
--hop-status-option6-border-selected | #654c0d | |
--hop-status-option6-icon | #7e5e0a | |
--hop-status-option6-icon-disabled | #e2a934 | |
--hop-status-option6-icon-hover | #654c0d | |
--hop-status-option6-icon-press | #4b390f | |
--hop-status-option6-icon-selected | #654c0d | |
--hop-status-option6-surface | #fff8d6 | |
--hop-status-option6-surface-disabled | #fff8d6 | |
--hop-status-option6-surface-hover | #fff2b8 | |
--hop-status-option6-surface-press | #eac96d | |
--hop-status-option6-surface-selected | #fff2b8 | |
--hop-status-option6-surface-strong | #e2a934 | |
--hop-status-option6-text | #7e5e0a | |
--hop-status-option6-text-disabled | #e2a934 | |
--hop-status-option6-text-hover | #654c0d | |
--hop-status-option6-text-press | #4b390f | |
--hop-status-option6-text-selected | #654c0d |
Data Visualization
| Name | Value | Preview |
|---|---|---|
--hop-dataviz-unavailable | #e0dfdd | |
--hop-dataviz-unavailable-weak | #ecebe8 | |
--hop-dataviz-unavailable-strong | #ccccca | |
--hop-dataviz-text-onlight | #3c3c3c | |
--hop-dataviz-text-ondark | #ffffff |
Monochromatic - Primary
| Name | Value | Preview |
|---|---|---|
--hop-dataviz-monochromatic-primary-25 | #f5f6ff | |
--hop-dataviz-monochromatic-primary-50 | #e6ebff | |
--hop-dataviz-monochromatic-primary-75 | #d6e0ff | |
--hop-dataviz-monochromatic-primary-100 | #b9cbff | |
--hop-dataviz-monochromatic-primary-200 | #95b1ff | |
--hop-dataviz-monochromatic-primary-300 | #6c8ffd | |
--hop-dataviz-monochromatic-primary-400 | #4767fe | |
--hop-dataviz-monochromatic-primary-500 | #3b57ff | |
--hop-dataviz-monochromatic-primary-600 | #2a43e8 | |
--hop-dataviz-monochromatic-primary-700 | #2040c7 | |
--hop-dataviz-monochromatic-primary-800 | #1b3587 | |
--hop-dataviz-monochromatic-primary-900 | #152450 | |
--hop-dataviz-monochromatic-primary-25-hover | #e6ebff | |
--hop-dataviz-monochromatic-primary-50-hover | #d6e0ff | |
--hop-dataviz-monochromatic-primary-75-hover | #b9cbff | |
--hop-dataviz-monochromatic-primary-100-hover | #95b1ff | |
--hop-dataviz-monochromatic-primary-200-hover | #6c8ffd | |
--hop-dataviz-monochromatic-primary-300-hover | #4767fe | |
--hop-dataviz-monochromatic-primary-400-hover | #3b57ff | |
--hop-dataviz-monochromatic-primary-500-hover | #2a43e8 | |
--hop-dataviz-monochromatic-primary-600-hover | #2040c7 | |
--hop-dataviz-monochromatic-primary-700-hover | #1b3587 | |
--hop-dataviz-monochromatic-primary-800-hover | #152450 | |
--hop-dataviz-monochromatic-primary-900-hover | #0b173a |
Monochromatic - Positive
| Name | Value | Preview |
|---|---|---|
--hop-dataviz-monochromatic-positive-25 | #f4f9e9 | |
--hop-dataviz-monochromatic-positive-50 | #e3f3b9 | |
--hop-dataviz-monochromatic-positive-75 | #cde8ac | |
--hop-dataviz-monochromatic-positive-100 | #aad89d | |
--hop-dataviz-monochromatic-positive-200 | #7dc291 | |
--hop-dataviz-monochromatic-positive-300 | #47a584 | |
--hop-dataviz-monochromatic-positive-400 | #188a71 | |
--hop-dataviz-monochromatic-positive-500 | #0c796b | |
--hop-dataviz-monochromatic-positive-600 | #0a6f64 | |
--hop-dataviz-monochromatic-positive-700 | #115a52 | |
--hop-dataviz-monochromatic-positive-800 | #16433d | |
--hop-dataviz-monochromatic-positive-900 | #132a27 | |
--hop-dataviz-monochromatic-positive-25-hover | #e3f3b9 | |
--hop-dataviz-monochromatic-positive-50-hover | #cde8ac | |
--hop-dataviz-monochromatic-positive-75-hover | #aad89d | |
--hop-dataviz-monochromatic-positive-100-hover | #7dc291 | |
--hop-dataviz-monochromatic-positive-200-hover | #47a584 | |
--hop-dataviz-monochromatic-positive-300-hover | #188a71 | |
--hop-dataviz-monochromatic-positive-400-hover | #0c796b | |
--hop-dataviz-monochromatic-positive-500-hover | #0a6f64 | |
--hop-dataviz-monochromatic-positive-600-hover | #115a52 | |
--hop-dataviz-monochromatic-positive-700-hover | #16433d | |
--hop-dataviz-monochromatic-positive-800-hover | #132a27 | |
--hop-dataviz-monochromatic-positive-900-hover | #0a1716 |
Monochromatic - Negative
| Name | Value | Preview |
|---|---|---|
--hop-dataviz-monochromatic-negative-25 | #fdf6f6 | |
--hop-dataviz-monochromatic-negative-50 | #fde6e5 | |
--hop-dataviz-monochromatic-negative-75 | #ffd6d3 | |
--hop-dataviz-monochromatic-negative-100 | #ffbcb7 | |
--hop-dataviz-monochromatic-negative-200 | #ff8e8e | |
--hop-dataviz-monochromatic-negative-300 | #f56263 | |
--hop-dataviz-monochromatic-negative-400 | #df3236 | |
--hop-dataviz-monochromatic-negative-500 | #cb2e31 | |
--hop-dataviz-monochromatic-negative-600 | #ba2d2d | |
--hop-dataviz-monochromatic-negative-700 | #952927 | |
--hop-dataviz-monochromatic-negative-800 | #6c2320 | |
--hop-dataviz-monochromatic-negative-900 | #431a17 | |
--hop-dataviz-monochromatic-negative-25-hover | #fde6e5 | |
--hop-dataviz-monochromatic-negative-50-hover | #ffd6d3 | |
--hop-dataviz-monochromatic-negative-75-hover | #ffbcb7 | |
--hop-dataviz-monochromatic-negative-100-hover | #ff8e8e | |
--hop-dataviz-monochromatic-negative-200-hover | #f56263 | |
--hop-dataviz-monochromatic-negative-300-hover | #df3236 | |
--hop-dataviz-monochromatic-negative-400-hover | #cb2e31 | |
--hop-dataviz-monochromatic-negative-500-hover | #ba2d2d | |
--hop-dataviz-monochromatic-negative-600-hover | #952927 | |
--hop-dataviz-monochromatic-negative-700-hover | #6c2320 | |
--hop-dataviz-monochromatic-negative-800-hover | #431a17 | |
--hop-dataviz-monochromatic-negative-900-hover | #2d100d |
Diverging Sequence 1
| Name | Value | Preview |
|---|---|---|
--hop-dataviz-diverging-sequence-1-positive9 | #16433d | |
--hop-dataviz-diverging-sequence-1-positive9-hover | #132a27 | |
--hop-dataviz-diverging-sequence-1-positive8 | #115a52 | |
--hop-dataviz-diverging-sequence-1-positive8-hover | #16433d | |
--hop-dataviz-diverging-sequence-1-positive7 | #0a6f64 | |
--hop-dataviz-diverging-sequence-1-positive7-hover | #115a52 | |
--hop-dataviz-diverging-sequence-1-positive6 | #0c796b | |
--hop-dataviz-diverging-sequence-1-positive6-hover | #0a6f64 | |
--hop-dataviz-diverging-sequence-1-positive5 | #188a71 | |
--hop-dataviz-diverging-sequence-1-positive5-hover | #0c796b | |
--hop-dataviz-diverging-sequence-1-positive4 | #47a584 | |
--hop-dataviz-diverging-sequence-1-positive-4-hover | #188a71 | |
--hop-dataviz-diverging-sequence-1-positive3 | #7dc291 | |
--hop-dataviz-diverging-sequence-1-positive3-hover | #47a584 | |
--hop-dataviz-diverging-sequence-1-positive2 | #aad89d | |
--hop-dataviz-diverging-sequence-1-positive2-hover | #7dc291 | |
--hop-dataviz-diverging-sequence-1-positive1 | #cde8ac | |
--hop-dataviz-diverging-sequence-1-positive1-hover | #aad89d | |
--hop-dataviz-diverging-sequence-1-neutral | #f7e694 | |
--hop-dataviz-diverging-sequence-1-neutral-hover | #eac96d | |
--hop-dataviz-diverging-sequence-1-negative1 | #ffd8be | |
--hop-dataviz-diverging-sequence-1-negative1-hover | #ffbcb7 | |
--hop-dataviz-diverging-sequence-1-negative2 | #ffbcb7 | |
--hop-dataviz-diverging-sequence-1-negative2-hover | #ff8e8e | |
--hop-dataviz-diverging-sequence-1-negative3 | #ff8e8e | |
--hop-dataviz-diverging-sequence-1-negative3-hover | #f56263 | |
--hop-dataviz-diverging-sequence-1-negative4 | #f56263 | |
--hop-dataviz-diverging-sequence-1-negative4-hover | #df3236 | |
--hop-dataviz-diverging-sequence-1-negative5 | #df3236 | |
--hop-dataviz-diverging-sequence-1-negative5-hover | #cb2e31 | |
--hop-dataviz-diverging-sequence-1-negative6 | #cb2e31 | |
--hop-dataviz-diverging-sequence-1-negative6-hover | #ba2d2d | |
--hop-dataviz-diverging-sequence-1-negative7 | #ba2d2d | |
--hop-dataviz-diverging-sequence-1-negative7-hover | #952927 | |
--hop-dataviz-diverging-sequence-1-negative8 | #952927 | |
--hop-dataviz-diverging-sequence-1-negative8-hover | #6c2320 | |
--hop-dataviz-diverging-sequence-1-negative9 | #6c2320 | |
--hop-dataviz-diverging-sequence-1-negative9-hover | #431a17 |
Diverging Sequence 2
| Name | Value | Preview |
|---|---|---|
--hop-dataviz-diverging-sequence-2-positive10 | #16433d | |
--hop-dataviz-diverging-sequence-2-positive10-hover | #132a27 | |
--hop-dataviz-diverging-sequence-2-positive9 | #115a52 | |
--hop-dataviz-diverging-sequence-2-positive9-hover | #16433d | |
--hop-dataviz-diverging-sequence-2-positive8 | #0a6f64 | |
--hop-dataviz-diverging-sequence-2-positive8-hover | #115a52 | |
--hop-dataviz-diverging-sequence-2-positive7 | #0c796b | |
--hop-dataviz-diverging-sequence-2-positive7-hover | #0a6f64 | |
--hop-dataviz-diverging-sequence-2-positive6 | #188a71 | |
--hop-dataviz-diverging-sequence-2-positive6-hover | #0c796b | |
--hop-dataviz-diverging-sequence-2-positive5 | #47a584 | |
--hop-dataviz-diverging-sequence-2-positive5-hover | #188a71 | |
--hop-dataviz-diverging-sequence-2-positive4 | #7dc291 | |
--hop-dataviz-diverging-sequence-2-positive4-hover | #47a584 | |
--hop-dataviz-diverging-sequence-2-positive3 | #aad89d | |
--hop-dataviz-diverging-sequence-2-positive3-hover | #7dc291 | |
--hop-dataviz-diverging-sequence-2-positive2 | #cde8ac | |
--hop-dataviz-diverging-sequence-2-positive2-hover | #aad89d | |
--hop-dataviz-diverging-sequence-2-positive1 | #e3f3b9 | |
--hop-dataviz-diverging-sequence-2-positive1-hover | #cde8ac | |
--hop-dataviz-diverging-sequence-2-negative1 | #fde6e5 | |
--hop-dataviz-diverging-sequence-2-negative1-hover | #ffd6d3 | |
--hop-dataviz-diverging-sequence-2-negative2 | #ffd6d3 | |
--hop-dataviz-diverging-sequence-2-negative2-hover | #ffbcb7 | |
--hop-dataviz-diverging-sequence-2-negative3 | #ffbcb7 | |
--hop-dataviz-diverging-sequence-2-negative3-hover | #ff8e8e | |
--hop-dataviz-diverging-sequence-2-negative4 | #ff8e8e | |
--hop-dataviz-diverging-sequence-2-negative4-hover | #f56263 | |
--hop-dataviz-diverging-sequence-2-negative5 | #f56263 | |
--hop-dataviz-diverging-sequence-2-negative5-hover | #df3236 | |
--hop-dataviz-diverging-sequence-2-negative6 | #df3236 | |
--hop-dataviz-diverging-sequence-2-negative6-hover | #cb2e31 | |
--hop-dataviz-diverging-sequence-2-negative7 | #cb2e31 | |
--hop-dataviz-diverging-sequence-2-negative7-hover | #ba2d2d | |
--hop-dataviz-diverging-sequence-2-negative8 | #ba2d2d | |
--hop-dataviz-diverging-sequence-2-negative8-hover | #952927 | |
--hop-dataviz-diverging-sequence-2-negative9 | #952927 | |
--hop-dataviz-diverging-sequence-2-negative9-hover | #6c2320 | |
--hop-dataviz-diverging-sequence-2-negative10 | #6c2320 | |
--hop-dataviz-diverging-sequence-2-negative10-hover | #431a17 |
Categorical - Sequences
| Name | Value | Preview |
|---|---|---|
--hop-dataviz-categorical-sequence-category1 | #c7ebff | |
--hop-dataviz-categorical-sequence-category1-hover | #ade2ff | |
--hop-dataviz-categorical-sequence-category2 | #ecd599 | |
--hop-dataviz-categorical-sequence-category2-hover | #e6c675 | |
--hop-dataviz-categorical-sequence-category3 | #d2cdf8 | |
--hop-dataviz-categorical-sequence-category3-hover | #bfb8f5 | |
--hop-dataviz-categorical-sequence-category4 | #b6bead | |
--hop-dataviz-categorical-sequence-category4-hover | #a4ae98 | |
--hop-dataviz-categorical-sequence-category5 | #fbbdcf | |
--hop-dataviz-categorical-sequence-category5-hover | #f99fb8 | |
--hop-dataviz-categorical-sequence-category6 | #bfdca9 | |
--hop-dataviz-categorical-sequence-category6-hover | #a9d08b | |
--hop-dataviz-categorical-sequence-category7 | #fbe997 | |
--hop-dataviz-categorical-sequence-category7-hover | #fae275 | |
--hop-dataviz-categorical-sequence-category8 | #e8ddd0 | |
--hop-dataviz-categorical-sequence-category8-hover | #ddcebb | |
--hop-dataviz-categorical-sequence-category9 | #a7e6dc | |
--hop-dataviz-categorical-sequence-category9-hover | #90e0d2 | |
--hop-dataviz-categorical-sequence-category10 | #aecdd5 | |
--hop-dataviz-categorical-sequence-category10-hover | #93bdc8 | |
--hop-dataviz-categorical-sequence-category11 | #ffbf92 | |
--hop-dataviz-categorical-sequence-category11-hover | #ffac70 | |
--hop-dataviz-categorical-sequence-category12 | #a0b8fa | |
--hop-dataviz-categorical-sequence-category12-hover | #779af8 | |
--hop-dataviz-categorical-sequence-category13 | #69bfa0 | |
--hop-dataviz-categorical-sequence-category13-hover | #54b692 |
Categorical - 2 Color Groups
| Name | Value | Preview |
|---|---|---|
--hop-dataviz-categorical-2colorgroup-option6-category2 | #69bfa0 | |
--hop-dataviz-categorical-2colorgroup-option6-category1 | #ffbf92 | |
--hop-dataviz-categorical-2colorgroup-option5-category2 | #a0b8fa | |
--hop-dataviz-categorical-2colorgroup-option5-category1 | #a7e6dc | |
--hop-dataviz-categorical-2colorgroup-option4-category2 | #6c8ffd | |
--hop-dataviz-categorical-2colorgroup-option4-category1 | #bfdca9 | |
--hop-dataviz-categorical-2colorgroup-option3-category2 | #ff9b3f | |
--hop-dataviz-categorical-2colorgroup-option3-category1 | #2f48ff | |
--hop-dataviz-categorical-2colorgroup-option2-category2 | #fbe997 | |
--hop-dataviz-categorical-2colorgroup-option2-category1 | #fbbdcf | |
--hop-dataviz-categorical-2colorgroup-option1-category2 | #c7ebff | |
--hop-dataviz-categorical-2colorgroup-option1-category1 | #b6bead |
Categorical - 3 Color Groups
| Name | Value | Preview |
|---|---|---|
--hop-dataviz-categorical-3colorgroup-option1-category1 | #b6bead | |
--hop-dataviz-categorical-3colorgroup-option1-category2 | #d2cdf8 | |
--hop-dataviz-categorical-3colorgroup-option1-category3 | #bfdca9 | |
--hop-dataviz-categorical-3colorgroup-option2-category1 | #ecd599 | |
--hop-dataviz-categorical-3colorgroup-option2-category2 | #a7e6dc | |
--hop-dataviz-categorical-3colorgroup-option2-category3 | #69bfa0 | |
--hop-dataviz-categorical-3colorgroup-option3-category1 | #69bfa0 | |
--hop-dataviz-categorical-3colorgroup-option3-category2 | #fbe997 | |
--hop-dataviz-categorical-3colorgroup-option3-category3 | #aecdd5 | |
--hop-dataviz-categorical-3colorgroup-option4-category1 | #b6bead | |
--hop-dataviz-categorical-3colorgroup-option4-category2 | #a0b8fa | |
--hop-dataviz-categorical-3colorgroup-option4-category3 | #fbbdcf |
Categorical - 4 Color Groups
| Name | Value | Preview |
|---|---|---|
--hop-dataviz-categorical-4colorgroup-option1-category1 | #b6bead | |
--hop-dataviz-categorical-4colorgroup-option1-category2 | #d2cdf8 | |
--hop-dataviz-categorical-4colorgroup-option1-category3 | #cde8ac | |
--hop-dataviz-categorical-4colorgroup-option1-category4 | #fbbdcf | |
--hop-dataviz-categorical-4colorgroup-option2-category1 | #b6bead | |
--hop-dataviz-categorical-4colorgroup-option2-category2 | #c7ebff | |
--hop-dataviz-categorical-4colorgroup-option2-category3 | #84d0b4 | |
--hop-dataviz-categorical-4colorgroup-option2-category4 | #fbe997 | |
--hop-dataviz-categorical-4colorgroup-option3-category1 | #ffbf92 | |
--hop-dataviz-categorical-4colorgroup-option3-category2 | #b6bead | |
--hop-dataviz-categorical-4colorgroup-option3-category3 | #2e70a8 | |
--hop-dataviz-categorical-4colorgroup-option3-category4 | #ecd599 | |
--hop-dataviz-categorical-4colorgroup-option4-category1 | #69bfa0 | |
--hop-dataviz-categorical-4colorgroup-option4-category2 | #c7ebff | |
--hop-dataviz-categorical-4colorgroup-option4-category3 | #fa4d59 | |
--hop-dataviz-categorical-4colorgroup-option4-category4 | #d2cdf8 |
Categorical - 5 Color Groups
| Name | Value | Preview |
|---|---|---|
--hop-dataviz-categorical-5colorgroup-option1-category1 | #b6bead | |
--hop-dataviz-categorical-5colorgroup-option1-category2 | #ff9b3f | |
--hop-dataviz-categorical-5colorgroup-option1-category3 | #bfdca9 | |
--hop-dataviz-categorical-5colorgroup-option1-category4 | #ecd599 | |
--hop-dataviz-categorical-5colorgroup-option1-category5 | #69bfa0 | |
--hop-dataviz-categorical-5colorgroup-option2-category1 | #ff9b3f | |
--hop-dataviz-categorical-5colorgroup-option2-category2 | #b6bead | |
--hop-dataviz-categorical-5colorgroup-option2-category3 | #2e70a8 | |
--hop-dataviz-categorical-5colorgroup-option2-category4 | #fbe997 | |
--hop-dataviz-categorical-5colorgroup-option2-category5 | #c5bef6 | |
--hop-dataviz-categorical-5colorgroup-option3-category1 | #d2cdf8 | |
--hop-dataviz-categorical-5colorgroup-option3-category2 | #ecd599 | |
--hop-dataviz-categorical-5colorgroup-option3-category3 | #aecdd5 | |
--hop-dataviz-categorical-5colorgroup-option3-category4 | #b6bead | |
--hop-dataviz-categorical-5colorgroup-option3-category5 | #ffbf92 | |
--hop-dataviz-categorical-5colorgroup-option4-category1 | #69bfa0 | |
--hop-dataviz-categorical-5colorgroup-option4-category2 | #c7ebff | |
--hop-dataviz-categorical-5colorgroup-option4-category3 | #fa4d59 | |
--hop-dataviz-categorical-5colorgroup-option4-category4 | #d2cdf8 | |
--hop-dataviz-categorical-5colorgroup-option4-category5 | #b6bead |
Categorical - 6 Color Groups
| Name | Value | Preview |
|---|---|---|
--hop-dataviz-categorical-6colorgroup-option1-category1 | #b6bead | |
--hop-dataviz-categorical-6colorgroup-option1-category2 | #a0b8fa | |
--hop-dataviz-categorical-6colorgroup-option1-category3 | #bfdca9 | |
--hop-dataviz-categorical-6colorgroup-option1-category4 | #fa4d59 | |
--hop-dataviz-categorical-6colorgroup-option1-category5 | #ecd599 | |
--hop-dataviz-categorical-6colorgroup-option1-category6 | #69bfa0 | |
--hop-dataviz-categorical-6colorgroup-option2-category1 | #2e70a8 | |
--hop-dataviz-categorical-6colorgroup-option2-category2 | #fbe997 | |
--hop-dataviz-categorical-6colorgroup-option2-category3 | #69bfa0 | |
--hop-dataviz-categorical-6colorgroup-option2-category4 | #ff9b3f | |
--hop-dataviz-categorical-6colorgroup-option2-category5 | #a7e6dc | |
--hop-dataviz-categorical-6colorgroup-option2-category6 | #d2cdf8 | |
--hop-dataviz-categorical-6colorgroup-option3-category1 | #b6bead | |
--hop-dataviz-categorical-6colorgroup-option3-category2 | #aecdd5 | |
--hop-dataviz-categorical-6colorgroup-option3-category3 | #e8ddd0 | |
--hop-dataviz-categorical-6colorgroup-option3-category4 | #a7e6dc | |
--hop-dataviz-categorical-6colorgroup-option3-category5 | #2e70a8 | |
--hop-dataviz-categorical-6colorgroup-option3-category6 | #fbbdcf | |
--hop-dataviz-categorical-6colorgroup-option4-category1 | #fbbdcf | |
--hop-dataviz-categorical-6colorgroup-option4-category2 | #a0b8fa | |
--hop-dataviz-categorical-6colorgroup-option4-category3 | #ffbf92 | |
--hop-dataviz-categorical-6colorgroup-option4-category4 | #c7ebff | |
--hop-dataviz-categorical-6colorgroup-option4-category5 | #bfdca9 | |
--hop-dataviz-categorical-6colorgroup-option4-category6 | #fbe997 |