alert--smallalertarchive--smallarchivearrow-left--smallarrow-leftarrow-right--smallarrow-rightblock--smallblockcalendar--smallcalendarcamera--smallcameracheck--smallcheck-circle--smallcheck-circlecheckchevron-down--smallchevron-downchevron-left--smallchevron-leftchevron-right--smallchevron-rightchevron-up--smallchevron-upclock--smallclock-arrow--smallclock-arrowclockcog--smallcogconversation--smallconversationcopy--smallcopycreditcard--smallcreditcardcross--smallcross-circle--smallcross-circlecrossdownload--smalldownloadedit--smalleditexport--smallexportexternal-facebookexternal-facebookboxedexternal-flickrexternal-gmailexternal-instagramexternal-linkedinexternal-mediumexternal-messenger-outlined--smallexternal-messenger-outlinedexternal-outlookexternal-tumblrexternal-twitter-outlined--smallexternal-twitter-outlinedexternal-twitterexternal-yahooexternal-youtubefilter--smallfilterfolder--smallfolderglobe--smallglobegroups--smallgroupsheart--smallheart-outline--smallheart-outlinehearthide--smallhidehome--smallhomeinfo--smallinfoinvite--smallinvitelaunch-new-window--smalllaunch-new-windowlink--smalllinklocation-pin--smalllocation-pin-slashed--smalllocation-pin-slashedlocation-pinlocation-services--smalllocation-serviceslock--smalllockmail--smallmailmeetup-m--smallmeetup-mmessages--smallmessagesminus--smallminusnotifications--smallnotifications-badged--smallnotifications-badgednotifications-mute--smallnotifications-mutenotificationsoverflow--smalloverflowphoto-album--smallphoto-album-add--smallphoto-album-addphoto-albumplus--smallplus-circle--smallplus-circleplusprofile--smallprofilepulse--smallpulserefresh--smallrefreshreply--smallreplysearch--smallsearchsend--smallsendsent-messages--smallsent-messagesshow--smallshowstar--smallstartextblock--smalltextblockticket--smalltickettrash--smalltrashupdates--smallupdates

Colors

Combining bold hues and muted environments, color at Meetup is inspired by both the personality of our members and organizers, and the spaces they inhabit. The color combinations we use have been carefully picked to maintain contrast and readability for all types of people.

base

white

RGBA:
rgb(255, 255, 255)
HEX:
#ffffff
SASS:
$C_white
CSS:
--c-white
JS:
C_WHITE
Android:
color_base_white

lightGray

RGBA:
rgb(246, 247, 248)
HEX:
#f6f7f8
SASS:
$C_lightGray
CSS:
--c-lightGray
JS:
C_LIGHTGRAY
Android:
color_base_light_gray

mediumGray

RGBA:
rgb(117, 117, 117)
HEX:
#757575
SASS:
$C_mediumGray
CSS:
--c-mediumGray
JS:
C_MEDIUMGRAY
Android:
color_base_medium_gray

darkGray

RGBA:
rgb(53, 62, 72)
HEX:
#353e48
SASS:
$C_darkGray
CSS:
--c-darkGray
JS:
C_DARKGRAY
Android:
color_base_dark_gray

coolGrayLight

RGBA:
rgb(228, 233, 237)
HEX:
#e4e9ed
SASS:
$C_coolGrayLight
CSS:
--c-coolGrayLight
JS:
C_COOLGRAYLIGHT
Android:
color_base_cool_gray_light

coolGrayLightTransp

RGBA:
rgba(41, 77, 107, 0.12)
HEX:
#294d6b
SASS:
$C_coolGrayLightTransp
CSS:
--c-coolGrayLightTransp
JS:
C_COOLGRAYLIGHTTRANSP
Android:
color_base_cool_gray_light_transp

coolGrayMedium

RGBA:
rgb(151, 159, 164)
HEX:
#979fa4
SASS:
$C_coolGrayMedium
CSS:
--c-coolGrayMedium
JS:
C_COOLGRAYMEDIUM
Android:
color_base_cool_gray_medium

coolGrayMediumTransp

RGBA:
rgba(84, 96, 107, 0.6)
HEX:
#54606b
SASS:
$C_coolGrayMediumTransp
CSS:
--c-coolGrayMediumTransp
JS:
C_COOLGRAYMEDIUMTRANSP
Android:
color_base_cool_gray_medium_transp

red

RGBA:
rgb(241, 58, 89)
HEX:
#f13a59
SASS:
$C_red
CSS:
--c-red
JS:
C_RED
Android:
color_base_red

darkRed

RGBA:
rgb(211, 45, 74)
HEX:
#d32d4a
SASS:
$C_darkRed
CSS:
--c-darkRed
JS:
C_DARKRED
Android:
color_base_dark_red

pink

RGBA:
rgb(255, 153, 209)
HEX:
#ff99d1
SASS:
$C_pink
CSS:
--c-pink
JS:
C_PINK
Android:
color_base_pink

yellow

RGBA:
rgb(255, 229, 51)
HEX:
#ffe533
SASS:
$C_yellow
CSS:
--c-yellow
JS:
C_YELLOW
Android:
color_base_yellow

lightBlue

RGBA:
rgb(77, 209, 237)
HEX:
#4dd1ed
SASS:
$C_lightBlue
CSS:
--c-lightBlue
JS:
C_LIGHTBLUE
Android:
color_base_light_blue

purple

RGBA:
rgb(55, 30, 172)
HEX:
#371eac
SASS:
$C_purple
CSS:
--c-purple
JS:
C_PURPLE
Android:
color_base_purple

blue

RGBA:
rgb(0, 162, 199)
HEX:
#00a2c7
SASS:
$C_blue
CSS:
--c-blue
JS:
C_BLUE
Android:
color_base_blue

plum

RGBA:
rgb(112, 0, 176)
HEX:
#7000b0
SASS:
$C_plum
CSS:
--c-plum
JS:
C_PLUM
Android:
color_base_plum

orange

RGBA:
rgb(255, 91, 15)
HEX:
#ff5b0f
SASS:
$C_orange
CSS:
--c-orange
JS:
C_ORANGE
Android:
color_base_orange

teal

RGBA:
rgb(0, 212, 128)
HEX:
#00d480
SASS:
$C_teal
CSS:
--c-teal
JS:
C_TEAL
Android:
color_base_teal

shamrock

RGBA:
rgb(89, 219, 51)
HEX:
#59db33
SASS:
$C_shamrock
CSS:
--c-shamrock
JS:
C_SHAMROCK
Android:
color_base_shamrock

black

RGBA:
rgb(15, 23, 33)
HEX:
#0f1721
SASS:
$C_black
CSS:
--c-black
JS:
C_BLACK
Android:
color_base_black

external

facebook

RGBA:
rgb(59, 89, 152)
HEX:
#3b5998
SASS:
$C_facebook
CSS:
--c-facebook
JS:
C_FACEBOOK
Android:
color_external_facebook

twitter

RGBA:
rgb(51, 204, 255)
HEX:
#33ccff
SASS:
$C_twitter
CSS:
--c-twitter
JS:
C_TWITTER
Android:
color_external_twitter

linkedin

RGBA:
rgb(72, 117, 180)
HEX:
#4875b4
SASS:
$C_linkedin
CSS:
--c-linkedin
JS:
C_LINKEDIN
Android:
color_external_linkedin

tumblr

RGBA:
rgb(43, 73, 100)
HEX:
#2b4964
SASS:
$C_tumblr
CSS:
--c-tumblr
JS:
C_TUMBLR
Android:
color_external_tumblr

flickr

RGBA:
rgb(254, 8, 131)
HEX:
#fe0883
SASS:
$C_flickr
CSS:
--c-flickr
JS:
C_FLICKR
Android:
color_external_flickr

foursquare

RGBA:
rgb(12, 186, 223)
HEX:
#0cbadf
SASS:
$C_foursquare
CSS:
--c-foursquare
JS:
C_FOURSQUARE
Android:
color_external_foursquare

googleplus

RGBA:
rgb(198, 61, 45)
HEX:
#c63d2d
SASS:
$C_googleplus
CSS:
--c-googleplus
JS:
C_GOOGLEPLUS
Android:
color_external_googleplus

googleplusbutton

RGBA:
rgb(255, 255, 255)
HEX:
#ffffff
SASS:
$C_googleplusbutton
CSS:
--c-googleplusbutton
JS:
C_GOOGLEPLUSBUTTON
Android:
color_external_googleplusbutton

instagram

RGBA:
rgb(78, 67, 60)
HEX:
#4e433c
SASS:
$C_instagram
CSS:
--c-instagram
JS:
C_INSTAGRAM
Android:
color_external_instagram

reddit

RGBA:
rgb(206, 227, 248)
HEX:
#cee3f8
SASS:
$C_reddit
CSS:
--c-reddit
JS:
C_REDDIT
Android:
color_external_reddit

wepay

RGBA:
rgb(72, 145, 220)
HEX:
#4891dc
SASS:
$C_wepay
CSS:
--c-wepay
JS:
C_WEPAY
Android:
color_external_wepay

yahoo

RGBA:
rgb(123, 0, 153)
HEX:
#7b0099
SASS:
$C_yahoo
CSS:
--c-yahoo
JS:
C_YAHOO
Android:
color_external_yahoo

outlook

RGBA:
rgb(0, 114, 198)
HEX:
#0072c6
SASS:
$C_outlook
CSS:
--c-outlook
JS:
C_OUTLOOK
Android:
color_external_outlook

text

primary

RGBA:
rgb(46, 62, 72)
HEX:
#2e3e48
SASS:
$C_textPrimary
CSS:
--c-textPrimary
JS:
C_TEXT_PRIMARY
Android:
color_text_primary

secondary

RGBA:
rgba(46, 62, 72, 0.6)
HEX:
#2e3e48
SASS:
$C_textSecondary
CSS:
--c-textSecondary
JS:
C_TEXT_SECONDARY
Android:
color_text_secondary

tertiary

RGBA:
rgba(46, 62, 72, 0.35)
HEX:
#2e3e48
SASS:
$C_textTertiary
CSS:
--c-textTertiary
JS:
C_TEXT_TERTIARY
Android:
color_text_tertiary

hint

RGBA:
rgba(46, 62, 72, 0.35)
HEX:
#2e3e48
SASS:
$C_textHint
CSS:
--c-textHint
JS:
C_TEXT_HINT
Android:
color_text_hint

disabled

RGBA:
rgba(46, 62, 72, 0.12)
HEX:
#2e3e48
SASS:
$C_textDisabled
CSS:
--c-textDisabled
JS:
C_TEXT_DISABLED
Android:
color_text_disabled

primaryInverted

RGBA:
rgb(255, 255, 255)
HEX:
#ffffff
SASS:
$C_textPrimaryInverted
CSS:
--c-textPrimaryInverted
JS:
C_TEXT_PRIMARYINVERTED
Android:
color_text_primary_inverted

secondaryInverted

RGBA:
rgba(255, 255, 255, 0.7)
HEX:
#ffffff
SASS:
$C_textSecondaryInverted
CSS:
--c-textSecondaryInverted
JS:
C_TEXT_SECONDARYINVERTED
Android:
color_text_secondary_inverted

tertiaryInverted

RGBA:
rgba(255, 255, 255, 0.35)
HEX:
#ffffff
SASS:
$C_textTertiaryInverted
CSS:
--c-textTertiaryInverted
JS:
C_TEXT_TERTIARYINVERTED
Android:
color_text_tertiary_inverted

hintInverted

RGBA:
rgba(255, 255, 255, 0.35)
HEX:
#ffffff
SASS:
$C_textHintInverted
CSS:
--c-textHintInverted
JS:
C_TEXT_HINTINVERTED
Android:
color_text_hint_inverted

disabledInverted

RGBA:
rgba(255, 255, 255, 0.12)
HEX:
#ffffff
SASS:
$C_textDisabledInverted
CSS:
--c-textDisabledInverted
JS:
C_TEXT_DISABLEDINVERTED
Android:
color_text_disabled_inverted

ui

attention

RGBA:
rgb(255, 91, 15)
HEX:
#ff5b0f
SASS:
$C_attention
CSS:
--c-attention
JS:
C_ATTENTION
Android:
color_ui_attention

success

RGBA:
rgb(0, 212, 128)
HEX:
#00d480
SASS:
$C_success
CSS:
--c-success
JS:
C_SUCCESS
Android:
color_ui_success

border

RGBA:
rgba(46, 62, 72, 0.12)
HEX:
#2e3e48
SASS:
$C_border
CSS:
--c-border
JS:
C_BORDER
Android:
color_ui_border

borderDark

RGBA:
rgba(46, 62, 72, 0.54)
HEX:
#2e3e48
SASS:
$C_borderDark
CSS:
--c-borderDark
JS:
C_BORDERDARK
Android:
color_ui_border_dark

borderInverted

RGBA:
rgba(255, 255, 255, 0.2)
HEX:
#ffffff
SASS:
$C_borderInverted
CSS:
--c-borderInverted
JS:
C_BORDERINVERTED
Android:
color_ui_border_inverted

borderDarkInverted

RGBA:
rgba(255, 255, 255, 0.7)
HEX:
#ffffff
SASS:
$C_borderDarkInverted
CSS:
--c-borderDarkInverted
JS:
C_BORDERDARKINVERTED
Android:
color_ui_border_dark_inverted

separator

RGBA:
rgba(46, 62, 72, 0.26)
HEX:
#2e3e48
SASS:
$C_separator
CSS:
--c-separator
JS:
C_SEPARATOR
Android:
color_ui_separator

highlight

RGBA:
rgba(0, 0, 255, 0.05)
HEX:
#0000ff
SASS:
$C_highlight
CSS:
--c-highlight
JS:
C_HIGHLIGHT
Android:
color_ui_highlight

selection

RGBA:
rgba(46, 62, 72, 0.05)
HEX:
#2e3e48
SASS:
$C_selection
CSS:
--c-selection
JS:
C_SELECTION
Android:
color_ui_selection

dimmingOverlay

RGBA:
rgba(46, 62, 72, 0.4)
HEX:
#2e3e48
SASS:
$C_dimmingOverlay
CSS:
--c-dimmingOverlay
JS:
C_DIMMINGOVERLAY
Android:
color_ui_dimming_overlay

tappable

RGBA:
rgba(56, 56, 15, 0.09)
HEX:
#38380f
SASS:
$C_tappable
CSS:
--c-tappable
JS:
C_TAPPABLE
Android:
color_ui_tappable

tappableInverted

RGBA:
rgba(255, 246, 196, 0.27)
HEX:
#fff6c4
SASS:
$C_tappableInverted
CSS:
--c-tappableInverted
JS:
C_TAPPABLEINVERTED
Android:
color_ui_tappable_inverted

contentBG

RGBA:
rgb(255, 255, 255)
HEX:
#ffffff
SASS:
$C_contentBG
CSS:
--c-contentBG
JS:
C_CONTENTBG
Android:
color_ui_content_bg

contentBGInverted

RGBA:
rgb(15, 23, 33)
HEX:
#0f1721
SASS:
$C_contentBGInverted
CSS:
--c-contentBGInverted
JS:
C_CONTENTBGINVERTED
Android:
color_ui_content_bg_inverted

collectionBG

RGBA:
rgb(246, 247, 248)
HEX:
#f6f7f8
SASS:
$C_collectionBG
CSS:
--c-collectionBG
JS:
C_COLLECTIONBG
Android:
color_ui_collection_bg

Give feedback

If this page is missing something or if you'd like to make an edit, you can:

  • open a PR in the Swarm Design System repo
  • file a ticket in JIRA
  • send us a message in the #design-systems Slack channel in Meetup's Slack team
Meetup home

Last updated Jan 01 2018, 6:00 PM