diff --git a/dev/generator/src/kanban.ts b/dev/generator/src/kanban.ts
index 3bcf3f6aa9..56c9ba11df 100644
--- a/dev/generator/src/kanban.ts
+++ b/dev/generator/src/kanban.ts
@@ -5,11 +5,11 @@ import { findOrUpdate } from './utils'
 
 export async function createUpdateSpaceKanban (ctx: MeasureContext, spaceId: Ref<SpaceWithStates>, client: TxOperations): Promise<Ref<State>[]> {
   const rawStates = [
-    { color: '#7C6FCD', name: 'Initial' },
-    { color: '#6F7BC5', name: 'Intermidiate' },
-    { color: '#77C07B', name: 'OverIntermidiate' },
-    { color: '#A5D179', name: 'Done' },
-    { color: '#F28469', name: 'Invalid' }
+    { color: 9, name: 'Initial' },
+    { color: 10, name: 'Intermidiate' },
+    { color: 1, name: 'OverIntermidiate' },
+    { color: 0, name: 'Done' },
+    { color: 11, name: 'Invalid' }
   ]
   const states: Array<Ref<State>> = []
   const stateRanks = genRanks(rawStates.length)
diff --git a/dev/tool/src/importer.ts b/dev/tool/src/importer.ts
index 0c4db659c4..189846ab58 100644
--- a/dev/tool/src/importer.ts
+++ b/dev/tool/src/importer.ts
@@ -372,8 +372,6 @@ async function createUpdateSpaceKanban (spaceId: Ref<Vacancy>, client: TxOperati
   const states: Map<string, Ref<State>> = new Map()
   const stateRanks = genRanks(stateNames.length)
 
-  const colors: string[] = ['#A5D179', '#77C07B', '#60B96E', '#45AEA3', '#46CBDE', '#47BDF6',
-    '#5AADF6', '#73A6CD', '#B977CB', '#7C6FCD', '#6F7BC5', '#F28469']
   let pos = 0
   for (const st of stateNames) {
     const rank = stateRanks.next().value
@@ -388,7 +386,7 @@ async function createUpdateSpaceKanban (spaceId: Ref<Vacancy>, client: TxOperati
       sid,
       {
         title: st,
-        color: colors[(pos++) % colors.length],
+        color: pos++,
         rank
       }
     )
diff --git a/models/lead/src/creation.ts b/models/lead/src/creation.ts
index d26321a495..78dc499c5e 100644
--- a/models/lead/src/creation.ts
+++ b/models/lead/src/creation.ts
@@ -38,12 +38,12 @@ export async function createDeps (client: Client): Promise<void> {
 
 const defaultKanban = {
   states: [
-    { color: '#7C6FCD', title: 'Incoming' },
-    { color: '#6F7BC5', title: 'Negotation' },
-    { color: '#77C07B', title: 'Offer preparing' },
-    { color: '#A5D179', title: 'Make a decision' },
-    { color: '#F28469', title: 'Contract conclusion' },
-    { color: '#7C6FCD', title: 'Done' }
+    { color: 9, title: 'Incoming' },
+    { color: 10, title: 'Negotation' },
+    { color: 1, title: 'Offer preparing' },
+    { color: 0, title: 'Make a decision' },
+    { color: 11, title: 'Contract conclusion' },
+    { color: 9, title: 'Done' }
   ],
   doneStates: [
     { isWon: true, title: 'Won' },
diff --git a/models/recruit/src/creation.ts b/models/recruit/src/creation.ts
index ea6741e7a4..9d71ae9d47 100644
--- a/models/recruit/src/creation.ts
+++ b/models/recruit/src/creation.ts
@@ -37,10 +37,10 @@ export async function createDeps (client: Client): Promise<void> {
 
 const defaultKanban = {
   states: [
-    { color: '#7C6FCD', title: 'HR Interview' },
-    { color: '#6F7BC5', title: 'Technical Interview' },
-    { color: '#77C07B', title: 'Test task' },
-    { color: '#A5D179', title: 'Offer' }
+    { color: 9, title: 'HR Interview' },
+    { color: 10, title: 'Technical Interview' },
+    { color: 1, title: 'Test task' },
+    { color: 0, title: 'Offer' }
   ],
   doneStates: [
     { isWon: true, title: 'Won' },
diff --git a/models/task/src/creation.ts b/models/task/src/creation.ts
index 3da92d2a66..32c8b26ece 100644
--- a/models/task/src/creation.ts
+++ b/models/task/src/creation.ts
@@ -37,11 +37,11 @@ export async function createDeps (client: Client): Promise<void> {
 
 const defaultKanban = {
   states: [
-    { color: '#7C6FCD', title: 'Open' },
-    { color: '#6F7BC5', title: 'In Progress' },
-    { color: '#77C07B', title: 'Under review' },
-    { color: '#A5D179', title: 'Done' },
-    { color: '#F28469', title: 'Invalid' }
+    { color: 9, title: 'Open' },
+    { color: 10, title: 'In Progress' },
+    { color: 1, title: 'Under review' },
+    { color: 0, title: 'Done' },
+    { color: 11, title: 'Invalid' }
   ],
   doneStates: [
     { isWon: true, title: 'Won' },
diff --git a/models/task/src/index.ts b/models/task/src/index.ts
index fa25f1a24f..c560000a70 100644
--- a/models/task/src/index.ts
+++ b/models/task/src/index.ts
@@ -59,7 +59,7 @@ export class TState extends TDoc implements State {
   @Prop(TypeString(), 'Title' as IntlString)
   title!: string
 
-  color!: string
+  color!: number
 
   declare rank: string
 }
@@ -173,7 +173,7 @@ export class TStateTemplate extends TAttachedDoc implements StateTemplate {
   title!: string
 
   @Prop(TypeString(), 'Color' as IntlString)
-  color!: string
+  color!: number
 
   declare rank: string
 }
diff --git a/models/task/src/migration.ts b/models/task/src/migration.ts
index 38a2172684..07da98e3a9 100644
--- a/models/task/src/migration.ts
+++ b/models/task/src/migration.ts
@@ -13,7 +13,7 @@
 // limitations under the License.
 //
 
-import { AttachedDoc, Class, Doc, Domain, DOMAIN_TX, Ref, TxCollectionCUD, TxCreateDoc, TxCUD, TxOperations } from '@anticrm/core'
+import { AttachedDoc, Class, Doc, Domain, DOMAIN_TX, Ref, TxCollectionCUD, TxCreateDoc, TxCUD, TxOperations, TxResult } from '@anticrm/core'
 import {
   MigrateOperation,
   MigrateUpdate,
@@ -22,7 +22,7 @@ import {
   MigrationUpgradeClient
 } from '@anticrm/model'
 import core from '@anticrm/model-core'
-import { Issue } from '@anticrm/task'
+import type { State, StateTemplate, Issue } from '@anticrm/task'
 import { DOMAIN_TASK, DOMAIN_STATE, DOMAIN_KANBAN } from '.'
 import task from './plugin'
 
@@ -133,5 +133,37 @@ export const taskOperation: MigrateOperation = {
         })
       }
     }
+
+    const tx = new TxOperations(client, core.account.System)
+
+    // To not depend on ui package let's use inlined ones one time
+    const colors = new Map([
+      '#A5D179',
+      '#77C07B',
+      '#60B96E',
+      '#45AEA3',
+      '#46CBDE',
+      '#47BDF6',
+      '#5AADF6',
+      '#73A6CD',
+      '#B977CB',
+      '#7C6FCD',
+      '#6F7BC5',
+      '#F28469'
+    ].map((color, idx) => [color, idx]))
+    const getIndex = (color: string): number => colors.get(color) ?? 0
+
+    const updateStates = async (states: (State[] | StateTemplate[])): Promise<TxResult[]> =>
+      await Promise.all(
+        states
+          .filter((state) => typeof state.color === 'string')
+          .map(async (state) => await tx.update(state, { color: getIndex(state.color as never as string) }))
+      )
+
+    const states = await client.findAll(task.class.State, {})
+    await updateStates(states)
+
+    const templateStates = await client.findAll(task.class.StateTemplate, {})
+    await updateStates(templateStates)
   }
 }
diff --git a/packages/ui/src/colors.ts b/packages/ui/src/colors.ts
index 6dab113a6d..f2bb3433d0 100644
--- a/packages/ui/src/colors.ts
+++ b/packages/ui/src/colors.ts
@@ -1,5 +1,5 @@
 
-const blackColors: string[] = [
+const blackColors = Object.freeze([
   '#A5D179',
   '#77C07B',
   '#60B96E',
@@ -12,7 +12,7 @@ const blackColors: string[] = [
   '#7C6FCD',
   '#6F7BC5',
   '#F28469'
-]
+])
 
 /**
  * @public
@@ -31,8 +31,8 @@ export function getPlatformColorForText (text: string): string {
 /**
  * @public
  */
-export function getPlatformColorCount (): number {
-  return blackColors.length
+export function getPlatformColors (): readonly string[] {
+  return blackColors
 }
 
 function hashCode (str: string): number {
diff --git a/plugins/task-resources/src/components/kanban/KanbanEditor.svelte b/plugins/task-resources/src/components/kanban/KanbanEditor.svelte
index aaa4ba6cbf..a8cb4de3cd 100644
--- a/plugins/task-resources/src/components/kanban/KanbanEditor.svelte
+++ b/plugins/task-resources/src/components/kanban/KanbanEditor.svelte
@@ -74,7 +74,7 @@
 
     await client.createDoc(task.class.State, kanban.space, {
       title: 'New State',
-      color: '#7C6FCD',
+      color: 9,
       rank: calcRank(lastOne, undefined)
     })
   }
diff --git a/plugins/task-resources/src/components/kanban/KanbanTemplateEditor.svelte b/plugins/task-resources/src/components/kanban/KanbanTemplateEditor.svelte
index 0a465beba9..f5f0983ea3 100644
--- a/plugins/task-resources/src/components/kanban/KanbanTemplateEditor.svelte
+++ b/plugins/task-resources/src/components/kanban/KanbanTemplateEditor.svelte
@@ -86,7 +86,7 @@
       'statesC',
       {
         title: 'New State',
-        color: '#7C6FCD',
+        color: 9,
         rank: calcRank(lastOne, undefined)
       }
     )
diff --git a/plugins/task-resources/src/components/kanban/KanbanView.svelte b/plugins/task-resources/src/components/kanban/KanbanView.svelte
index 360e248fc1..f29a637293 100644
--- a/plugins/task-resources/src/components/kanban/KanbanView.svelte
+++ b/plugins/task-resources/src/components/kanban/KanbanView.svelte
@@ -21,7 +21,7 @@
   import { createQuery, getClient } from '@anticrm/presentation'
   import type { Kanban, SpaceWithStates, State } from '@anticrm/task'
   import task, { DoneState, LostState, WonState, DocWithRank, calcRank } from '@anticrm/task'
-  import type { AnySvelteComponent } from '@anticrm/ui'
+  import { AnySvelteComponent, getPlatformColor } from '@anticrm/ui'
   import { AnyComponent, Loading, ScrollBox } from '@anticrm/ui'
   import KanbanPanel from './KanbanPanel.svelte'
   // import KanbanPanelEmpty from './KanbanPanelEmpty.svelte'
@@ -182,7 +182,7 @@
     <ScrollBox>
       <div class="kanban-content">
         {#each states as state (state)}
-          <KanbanPanel label={state.title} color={state.color} counter={4}
+          <KanbanPanel label={state.title} color={getPlatformColor(state.color)} counter={4}
             on:dragover={(event) => {
               event.preventDefault()
               if (dragCard.state !== state._id) {
diff --git a/plugins/task-resources/src/components/state/ColorsPopup.svelte b/plugins/task-resources/src/components/state/ColorsPopup.svelte
index 42a96978c1..b96d83ee0d 100644
--- a/plugins/task-resources/src/components/state/ColorsPopup.svelte
+++ b/plugins/task-resources/src/components/state/ColorsPopup.svelte
@@ -16,10 +16,10 @@
 
 <script lang="ts">
   import { createEventDispatcher } from 'svelte'
+  import { getPlatformColors } from '@anticrm/ui'
   import PopupDialog from './PopupDialog.svelte'
 
-  export let colors: string[] = ['#A5D179', '#77C07B', '#60B96E', '#45AEA3', '#46CBDE', '#47BDF6',
-    '#5AADF6', '#73A6CD', '#B977CB', '#7C6FCD', '#6F7BC5', '#F28469']
+  export let colors: readonly string[] = getPlatformColors()
   export let columns: number = 5
 
   const dispatch = createEventDispatcher()
@@ -27,8 +27,8 @@
 
 <PopupDialog label={'CHOOSE A COLOR'}>
   <div class="color-grid" style="grid-template-columns: repeat({columns}, 1.5rem)">
-    {#each colors as color}
-      <div class="color" style="background-color: {color}" on:click={() => { dispatch('close', color) }} />
+    {#each colors as color, i}
+      <div class="color" style="background-color: {color}" on:click={() => { dispatch('close', i) }} />
     {/each}
   </div>
 </PopupDialog>
diff --git a/plugins/task-resources/src/components/state/StatesEditor.svelte b/plugins/task-resources/src/components/state/StatesEditor.svelte
index 11c5be4e40..4236f629be 100644
--- a/plugins/task-resources/src/components/state/StatesEditor.svelte
+++ b/plugins/task-resources/src/components/state/StatesEditor.svelte
@@ -18,7 +18,7 @@
   import { Ref } from '@anticrm/core'
   import { AttributeEditor, getClient } from '@anticrm/presentation'
   import type { DoneState, State } from '@anticrm/task'
-  import { CircleButton, IconAdd, IconMoreH, Label, showPopup } from '@anticrm/ui'
+  import { CircleButton, IconAdd, IconMoreH, Label, showPopup, getPlatformColor } from '@anticrm/ui'
   import { createEventDispatcher } from 'svelte'
   import ColorsPopup from './ColorsPopup.svelte'
   import Circles from './Circles.svelte'
@@ -60,7 +60,7 @@
     })
   }
 
-  const onColorChange = (state: State) => async (color: string | undefined): Promise<void> => {
+  const onColorChange = (state: State) => async (color: number | undefined): Promise<void> => {
     if (color === undefined) {
       return
     }
@@ -97,7 +97,7 @@
           }}
         >
           <div class="bar"><Circles /></div>
-          <div class="color" style="background-color: {state.color}"
+          <div class="color" style="background-color: {getPlatformColor(state.color)}"
             on:click={() => {
               showPopup(ColorsPopup, {}, elements[i], onColorChange(state))
             }}
diff --git a/plugins/task/src/index.ts b/plugins/task/src/index.ts
index 4fc9991b3b..5783d44578 100644
--- a/plugins/task/src/index.ts
+++ b/plugins/task/src/index.ts
@@ -46,7 +46,7 @@ export interface DocWithRank extends Doc {
  */
 export interface State extends DocWithRank {
   title: string
-  color: string
+  color: number
 }
 
 /**