How to use the @dhis2/ui-core.colors.red500 function in @dhis2/ui-core

import React from 'react';
import PropTypes from 'prop-types';
import ItemHeaderButton from '../Item/ItemHeaderButton';
import DeleteIcon from '@material-ui/icons/Delete';
import { colors } from '@dhis2/ui-core';

const style = {
    button: {
        position: 'absolute',
        top: '7px',
        right: '7px',
        zIndex: '1000',
    },
    icon: {
        fill: colors.red500,
    },
};

const DeleteItemHeaderButton = ({ onClick }) => (
    
        
    
);

DeleteItemHeaderButton.propTypes = {
    onClick: PropTypes.func,
};

export default DeleteItemHeaderButton;

const DeleteIcon = ({ className }) => (
    <svg fill="{colors.red500}" viewBox="0 0 24 24" height="18" width="18" xmlns="http://www.w3.org/2000/svg">
        <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"></path>
        <path fill="none" d="M0 0h24v24H0z"></path>
    </svg>
);