diff --git a/UI/src/components/servers/ServerCard.js b/UI/src/components/servers/ServerCard.js
index d6d21c3..cbb84a5 100644
--- a/UI/src/components/servers/ServerCard.js
+++ b/UI/src/components/servers/ServerCard.js
@@ -1,6 +1,7 @@
 import React, { Component } from 'react'
 import ImmutablePropTypes from 'react-immutable-proptypes'
 import { NavLink } from 'react-router-dom'
+import { colorToCSS } from '../../utils'
 import './ServerCard.sass'
 
 class ServerCard extends Component {
@@ -59,7 +60,7 @@ class ServerCard extends Component {
         <div className="server-list__item__info">
           <b>{s.get('name')}</b>
           <br />
-          <span style={{ color: gm.get('color') }}>
+          <span style={{ color: colorToCSS(gm.get('color')) }}>
             {gm.get('nick') || user.get('username')}
           </span>{' '}
           {icon}
diff --git a/UI/src/utils.js b/UI/src/utils.js
index 60712e4..eb44042 100644
--- a/UI/src/utils.js
+++ b/UI/src/utils.js
@@ -1 +1,5 @@
+import color from 'color'
+
 export const msgToReal = msg => msg.replace(/</g, '&lt;').replace(/\n/g, '<br />')
+
+export const colorToCSS = colorInt => color(colorInt).hsl().string()
\ No newline at end of file